Html设计

    <div class="btn-audio">
 <audio id="mp3Btn"  >
            <source src="http://wangyang-bucket.oss-cn-beijing.aliyuncs.com/cms/image/张茜 - 有没有那么一首歌 [mqms2]_1601549586268.mp3" type="audio/mpeg" />
        </audio>
</div> 

//alert("ddwedwef"+ $('#mp3Btn').html())
        $(function(){

            //播放完毕
            $('#mp3Btn').on('ended', function() {
                console.log("音频已播放完成");
				//alert("dsdd")
                $('.btn-audio').css({'background':'url(http://wangyang-bucket.oss-cn-beijing.aliyuncs.com/cms/image/imgSvg-1601552311513.svg) no-repeat center bottom','background-size':'cover'});
            })
            //播放器控制
            var audio = document.getElementById('mp3Btn');

audio.volume = .3;
  
  setTimeout(function() {
        audio.play()
        $('.btn-audio').toggleClass("rotate");  
      }, 5000);
     


            $('.btn-audio').click(function() {
                $(this).toggleClass("rotate");
                event.stopPropagation();//防止冒泡
			//	audio.paused  
                if($(this).hasClass("rotate")){ //如果当前是暂停状态
                   // $('.btn-audio').css({'background':'url(http://wangyang-bucket.oss-cn-beijing.aliyuncs.com/cms/image/imgSvg-1601552624518.svg) no-repeat center bottom','background-size':'cover'});
                    audio.play(); //播放
                    return;
                }else{//当前是播放状态
                  //  $('.btn-audio').css({'background':'url(http://wangyang-bucket.oss-cn-beijing.aliyuncs.com/cms/image/imgSvg-1601552311513.svg) no-repeat center bottom','background-size':'cover'});
                    audio.pause(); //暂停
                }
            });
        })