H5页面使用audio标签播放音频(html5video标签)越早知道越好

随心笔谈1年前 (2023)发布 admin
156 0

<a class=”play” id=”audioBtn” style=”cursor:pointer;” οnclick=”autoPlay()”></a>
?<audio id=”bgMusic” src=”https://www.jb51.net/article/js/2.mp3″ autoplay preload loop=”loop”></audio>
?css.pause {
? ? ? ? ? ? ?height: 50px;
? ? ? ? ? ? ?background: url(images/musicbtn.png) no-repeat;
? ? ? ? ? ? ?display: block;
? ? ? ? ? ? ?background-position: 0 bottom;
? ? ? ? ?}

? ? ? ? ?.play {
? ? ? ? ? ? ?height: 50px;
? ? ? ? ? ? ?background: url(images/musicbtn.png) no-repeat;
? ? ? ? ? ? ?display: block;
? ? ? ? ?} js
function autoPlay() {
? ? ? ? ? ? ?var myAuto=document.getElementById(‘bgMusic’);
? ? ? ? ? ? ?var btn=document.getElementById(‘audioBtn’);
? ? ? ? ? ? ?if (myAuto.paused) {
? ? ? ? ? ? ? ? ?myAuto.play();
? ? ? ? ? ? ? ? ?btn.classList.remove(“pause”);
? ? ? ? ? ? ? ? ?btn.classList.add(“play”);
? ? ? ? ? ? ?} else {
? ? ? ? ? ? ? ? ?myAuto.pause();

? ? ? ? ? ? ? ? ?btn.classList.remove(“play”);
? ? ? ? ? ? ? ? ?btn.classList.add(“pause”);
? ? ? ? ? ? ?}

? ? ? ? ?}

© 版权声明

相关文章