html修改列表内的audio样式,如何修改H5中的audio样式

HTML

我要吃肉肉

何曼婷 - 我要吃肉肉

CSS

.btn-audio{

width: 100%;

height: 5.2rem;

border: 1px solid #ebebeb;

background-color: #fdfdfd;

margin-bottom: 1rem;

margin-top: 1rem;

position: relative;

}

.mp3Box{

width: 2.8rem;

height: 2.8rem;

position: absolute;

top: 1.2rem;

left: 1.2rem;

background:url("image/close.png") no-repeat center bottom;

background-size:cover;

z-index: 100;

}

JS

$(function(){

//播放完毕

$('#mp3Btn').on('ended', function() {

console.log("音频已播放完成");

$('.mp3Box').css({'background':'url(image/close.png) no-repeat center bottom','background-size':'cover'});

});

//播放器控制

var audio = document.getElementById('mp3Btn');

audio.volume = .3;

$('.mp3Box').click(function() {

event.stopPropagation();//防止冒泡

if(audio.paused){ //如果当前是暂停状态

$('.mp3Box').css({'background':'url(image/open.png) no-repeat center bottom','background-size':'cover'});

audio.play(); //播放

}else{//当前是播放状态

$('.mp3Box').css({'background':'url(image/close.png) no-repeat center bottom','background-size':'cover'});

audio.pause(); //暂停

}

});

})

修改前：

修改后：