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();//暫停

}

});

})

通過以上的代碼，就可以調整成自己喜歡的樣式了。

總結

以上是生活随笔為你收集整理的audio 上一首 下一首 自定义样式_HTML5中 audio标签的样式修改的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。