8月23日,台风“天鸽”的到来,带来了些风雨,也给平淡的上班生活带来了些乐趣。
今天做的一个小需求,就是要在网页上添加音频,html5属性可以实现,用这个标签可以实现音频的播放,可是存在一个问题,就是会存在默认的标签样式。
解决方法:不需要标签自带的样式(把controls属性去掉),使用js控制音频的播放暂停。
HTML:
CSS:
body{background:#2b2938;}
.btn-audio{
margin: 90px auto;
width: 186px;
height: 186px;
background:url(images/voice_stop.png) no-repeat center bottom;
background-size:cover;
}
Javascript:
$('#mp3Btn').on('ended', function() {
console.log("音频已播放完成");
$('.btn-audio').css({'background':'url(images/voice_stop.png) no-repeat center bottom','background-size':'cover'});
})//播放器控制
var audio = document.getElementById('mp3Btn');
audio.volume= .3;
$('.btn-audio').click(function() {
event.stopPropagation();//防止冒泡
if(audio.paused){ //如果当前是暂停状态
$('.btn-audio').css({'background':'url(images/voice_play.png) no-repeat center bottom','background-size':'cover'});
audio.play();//播放
return;
}else{//当前是播放状态
$('.btn-audio').css({'background':'url(images/voice_stop.png) no-repeat center bottom','background-size':'cover'});
audio.pause();//暂停
}
});
})
通过以上的代码,就可以调整成自己喜欢的样式了。