JS Implementation control HTML5 background music playback Pause

First embed the background music in the webpage, the HTML5 code is:

<Scriptsrc= "Http://wuover.qiniudn.com/jquery.js"></Script><aclass= "Mscbtn"ID= "Audiobtn"title= ' The happiest person 'style= "Cursor:pointer;"></a><AudioID= "Bgmusic"src= "Http://cctv3.qiniudn.com/zuixingfuderen.mp3"AutoPlay= "AutoPlay"></Audio>

CSS styles are:

. pause {background-position:0 bottom;}. mscbtn {height:50px;background: #fff url (http://cctv2.qiniudn.com/musicbtn.png) no-repeat;display:block;}

The audio ID allows you to control the playback (play ()) and Pause (pause ()) of the music, while changing the background image of the button by changing the class, JS code (remember to introduce the JQ library):

$ (function () {$ ("#audioBtn"). Click (function () {if (music.paused) {Music.play (); $ ("#audioBtn"). Removeclass ("pause") . addclass ("Play");} Else{music.pause (); $ ("#audioBtn"). Removeclass ("Play"). AddClass ("pause");}});

Improved the next, let the background music support a number of songs, play at random play the next song and will not and the previous duplicate

$(function(){varMusic = document.getElementById ("Bgmusic");varmusicarr=[//The following corresponds to the song link and song name, self-added, separate{url: ' Http://cctv3.qiniudn.com/tbhdqx.mp3 ', title: "Tong Pak-Fu points Chou-Heung"}, {URL:' Http://cctv3.qiniudn.com/abzxh.mp3 ', title: "Obo to meet Again"}, {URL:' Http://cctv3.qiniudn.com/lmzda.mp3 ', title: "Spicy Sister's Love"}, {URL:' Http://cctv3.qiniudn.com/32.mp3 ', title: "32nd, Marry You"}, {URL:' Http://cctv3.qiniudn.com/tongxinjishou.mp3 ', title: "Bitterly"}, {URL:' Http://cctv3.qiniudn.com/rgangdst.mp3 ', title: "If Love can touch the sky"}, {URL:' Http://cctv3.qiniudn.com/cz.mp3 ', Title: "Station"}, {URL:' Http://cctv3.qiniudn.com/hn.ogg ', title: "Difficult"}, {URL:' Http://cctv3.qiniudn.com/aqlmysdsc.mp3 ', title: "No one is wrong in love"}, {URL:' Http://cctv3.qiniudn.com/dlaqdln.mp3 ', title: "Lost Love Lost You"}, {URL:' Http://cctv3.qiniudn.com/cty.mp3 ', title: "Breaking the Horizon"}];$("#audioBtn"). Click (function(){    if(music.paused) {music.play (); $("#audioBtn"). Removeclass ("pause"). AddClass ("Play"); }Else{music.pause (); $("#audioBtn"). Removeclass ("Play"). AddClass ("Pause"); }});functionRandommusic () {varisone=$ ("#bgMusic"). attr (' src '); varNoone=musicarr[parseint (Math.random () *Musicarr.length)]; if(noone.url==isone) {       varNoone=musicarr[parseint (Math.random () *Musicarr.length)]; }   $("#bgMusic"). attr (' src ', Noone.url); $("#audioBtn"). attr (' title '), noone.title);}    Randommusic (); $("#bgMusic"). On (' ended ',function() {randommusic (); });});

JS Implementation control HTML5 background music playback Pause