Tracking exercise progress with audio

For the 7-Minute Workout app, adding sound support is vital. One cannot exercise while constantly staring at the screen. Audio clues help the user perform the workout effectively as they can just follow the audio instructions.

Here is how we are going to support exercise tracking using audio clues:

• A ticking clock soundtrack progress during the exercise
• A half-way indicator sounds, indicating that the exercise is halfway through
• An exercise-completion audio clip plays when the exercise is about to end
• An audio clip plays during the rest phase and informs users about the next exercise

There will be an audio clip for each of these scenarios.

Modern browsers have good support for audio. The HTML5 <audio> tag provides a mechanism to embed audio clips into HTML content. We too will use the <audio> tag to play back our clips.

Since the plan is to use the HTML <audio> element, we need to create a wrapper directive that allows us to control audio elements from Angular. Remember that directives are HTML extensions without a view.