您的位置:首页 > Web前端 > HTML5

h5播放音乐

2015-06-03 18:51 627 查看
h5音频播放,里面参数可以查看http://www.w3school.com.cn/html5/html_5_audio.asp

<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

html部分:

<div style="z-index: 999; width: 30px; height: 30px; position: absolute; top: 2%; left: 89%; cursor: pointer;" id="mplay">
<audio autoplay="autoplay" loop="loop" id="audio" src="http://www.eyee.cn/Public/Uploads/images/2015/04/27/699/553df80928571.mp3">
<!--    <source src="song.mp3" type="audio/mpeg"></source> -->使用本地音乐
</audio>
</div>

js效果:可以通过点击一张图片来控制音乐的播放和暂停

var sj_music = true;
var music = document.getElementById("audio");
$("#mplay").click(function(){
if(sj_music){
$(this).css("background-image","url(images/musicoff.png)");
music.pause();
sj_music = false;
}else{
$(this).css("background","url(images/musicon.png)");
music.play();
sj_music = true;
}
});

效果如下:

播放时效果


暂停时效果

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: