jQuery基于html5 audio属性制作的图标列表布局mp3音乐播放代码,点击图标播放音乐,正在播放的音乐标题有晃动动画效果,只能同时播放一个音频,可以暂停。
js代码
<script src="js/jquery.min.js"></script>
<script>
$(function(){
//jq 转js 控制暂停或播放切换
// 获取所有audios
var audios = document.getElementsByTagName("audio");
// 暂停函数
function pauseAll() {
var self = this;
[].forEach.call(audios, function (i) {
// 将audios中其他的audio全部暂停
i !== self && i.pause();
})
}
// 给play事件绑定暂停函数
[].forEach.call(audios, function (i) {
i.addEventListener("play", pauseAll.bind(i));
});
//点击切换播放
$(".video-img-mask").click(function () {
if(!$(this).hasClass("video-img-paly")){//如果当前播放
$('.video-img-mask').removeClass("video-img-paly");
$('.audio-iocn').attr('src','images/audio_icon.png'); //播放图片
$('.video-iocn').attr('src','images/video_icon.png'); //播放图片
$(this).addClass("video-img-paly");
$('.music-name p').removeClass("on");
$(this).parents('li').find('.music-name p').addClass("on");
$(this).find('.audio-iocn').attr('src','images/play_icon.png'); //播放图片
$(this).find('.video-iocn').attr('src','images/play_icon.png'); //播放图片
$(this).find('.audio').get(0).play(); //开始播
}else{ //如果当前暂停
$(this).removeClass("video-img-paly");
$('.music-name p').removeClass("on");
$(this).find('.audio-iocn').attr('src','images/audio_icon.png'); //播放图片
$(this).find('.video-iocn').attr('src','images/video_icon.png'); //播放图片
$(this).find('.audio').get(0).pause(); //开始播放
}
})
});
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791