audio 上一首 下一首 自定义样式_HTML5中 audio标签的样式修改

2017年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();//暂停

}

});

})

通过以上的代码，就可以调整成自己喜欢的样式了。