In the above code snippet, notice that we have used a .js file called ModernizrBuild.js that has been downloaded from http://www.modernizr.com/download/ website.
It basically helps us to check if a particular feature of HTML5 is supported in the browser or not. To know more about the Modernizr, please visit its website as mentioned above.
Coming to the above code snippet, in this case we are using Modernizr to check if audio is supported into the browser from which our page is browsed. If not, on the page loads user gets “Audio is NOT supported” as an alert.
As soon as the page loads, it checks for the Modernizr.audio property, if this is true it means that audio is supported in the browser that is being used to browse this page.
Next we have found out the audio, volume and seekbar elements on the page and stored them in the variable.
On load of the window we have set the
durationchange event of the audio element that helps us to update the time elapsed for audio play in the label element and setting the min and max range for the seekbar range element. We are also setting the volume element value to the default audio element volume that will be the system default volume.
On change of the volume range element, we have set audio volume to the value selected by the user. If the value selected by the user is 0, we simply mute the audio otherwise unmute it.
In this function, we are setting the minimum and maximum range of the seekbar range element.
In this function, we are setting the current time of the audio element to the seekbar selected value by the user.
In this function, we are simply getting the current position of the audio play and getting the hour, minute and seconds lapsed and writing in the label element. We are also setting the seekbar min, max and value to the audio startTime, duration and currentTime values respectively so that the seekbar value is in sync with the audio running position.
This function simply checks if audio is paused, it plays (by calling the play() method on audio element) the audio else if it is ended already then change its position to 0 (ie beginning) and plays it.
This function checks if the audio is already playing, if yes then call pause() function that pauses the audio.
In this function, we check if the audio is muted already, then set muted property of the audio element to false so that it will be unmuted and set the volume range element to the audio volume. If the audio is not muted then it mutes and set the volume range element to 0.Views: 3999 | Post Order: 103