Html5,audio Music Player

Finally, do what they have always wanted to achieve, the result is that some things once started to do, then it is not very difficult. Now I'm listening to my player's "shining years" to write this Saturday Morning Post. Writing is not very good, but also please predecessors magnanimous I this do not understand the rookie, but also hope that the predecessors actively correct my mistakes, younger brother grateful!

Before the official content, you can preview the effect, http://xxyy.ahthw.com/myMusic/MyMusic.html (here, again thanks to the server provided by Wang Go!) )

This project mainly uses the HTML5 audio tag and its own methods and properties, ie9+ browser compatible.

For an audio-related API, see: Http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

It is worth mentioning that, in the project, encountered such a problem, according to the normal thinking, a music playback process is this:

Click event to replace Audio's SRC, music reload, Audio.load (), then play Music Audio.play (), and then go to get the total length of music, Audio.duration, but the time to get the total design of Nan, this problem let me tangled for a while, presumably also can analyze the cause of the problem, when the browser to execute the Audio.play (), the music may not be loaded, The audio.duration has been executed, so the time value obtained is always nan, thanks again to the solution provided by the non-trace brother. By listening to whether this song has been played (Canplay), to get the time, the related api,http://www.w3school.com.cn/tags/av_event_canplay.asp

Workaround Code:

Musicplayer.addeventlistener (' Canplay ', function (e) {        $AllTime. Text (Maketime (musicplayer.duration));// Maketime is a function that handles the processing of seconds into 00:00 format        alltime = musicplayer.duration;    }, False);

In fact, this problem, or because of their first write, less experience, no careful review of the API caused, I hope the same rookie and I will not make the same mistakes.

In the overall effect, there is an effect of adding a virtual scrollbar based on the height of the content and the height of the container, and for the scroll bar code, refer to the previous blog post:

http://blog.csdn.net/u014703834/article/details/44159921

Specific project code is not here to reflect, interested friends can add me qq:756500909, or online leave e-mail address, I will share the source files to you. Hope to exchange technology and experience together!

Html5,audio Music Player