js网页点击播放背景音乐,再次点击暂停播放背景音乐

萌新正在学习前端js 尝试用js

效果:

js网页点击播放背景音乐,再次点击暂停播放背景音乐_第1张图片
点击艾欧尼亚昂扬不灭时 播放音乐,再次点击暂停播放

原理:

1、给这个div中添加 audio属性 js控制当点击这个div时播放 再次点击暂停

html中代码:

  <div class="title-text">
        <img src="./img/艾欧尼亚图标.jfif" alt="">
        <span onclick="bgaudio()">艾欧尼亚—昂扬不灭!</span>
        <audio src="../sungang/mp3/CRAT - 英雄联盟-Legend Never Die(CRAT remix).mp3" id="bgaudio"></audio>

    </div>

js中代码:

 var bgaudiocount = 0;
        function bgaudio(){       
            ++bgaudiocount;
            if(bgaudiocount % 2 == 1){   
                document.getElementById("bgaudio").play();      
            }else{
                document.getElementById("bgaudio").pause();
            }
          
        }
设置一个计数器 当点击时,值为奇数时播放 , 偶数暂停

前端萌新一个 如果你有更好的idear 欢迎在评论区指教~ 感谢~~~~(现在只学到js 或许以后我回头看到自己写的代码,回来一句就这? 23333~~~~)

你可能感兴趣的:(前端学习)