js页面播放音乐

html

1
2
3
<a class="myMusic" title="">
<span class="circle play"></span>
</a>

css

js,导入jquery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
var musicSrc = 'bulid/images/music.mp3';
var audio = null;
function setAudio(){
audio = document.createElement('audio');
audio.src = musicSrc;
if(!audio){
audio.load(); //加载音乐
}else{
audio.play();
audio.loop = true; //循环播放
}
}
var musicBtn = $('.myMusic');
var $music = musicBtn.find('.circle');
//控制
musicBtn.off().on('click',function(){
if($music.hasClass('play')){ //如果已经播放,则暂停
audio && (audio.pause());
$music.addClass('pause').removeClass('play');
}else{
audio && (audio.play());
$music.addClass('play').removeClass('pause');
}
});
//页面加载后执行
window.onload = function(){
setAudio();
}
</script>