javascript 如何切换音频播放()暂停()与一个按钮或链接?

pjngdqdw  于 2022-12-10  发布在  Java
关注(0)|答案(6)|浏览(163)

我有一个音频文件,当一个锚标签被点击时播放。如果锚标签被再次点击,我希望音频暂停,我只是不知道足够的javascript拉这后半部分了。我不想改变锚标签的内容,我只是希望音频文件开始和暂停,每当他们点击标签。
这是我目前所拥有的,至少使声音文件可以播放:

<audio id="audio" src="/Demo.mp3"></audio>
<a onClick="document.getElementById('audio').play()">Click here to hear.</a>
hs1rzwqc

hs1rzwqc1#

一个香草Javascript的方式来做你需要的。
注意:我注意到其他问题的评论中有多个赞成原生js方法的投票,并且看到OP没有jquery标记。
因此**WORKING EXAMPLE**:

SOLN 1:(我的初始解决方案使用事件)

第一个

SOLN 2:(使用基于dandavi注解的myAudio.paused属性)

第一次

bt1cpqcv

bt1cpqcv2#

var audioElement= document.getElementById("audio-player");
function togglePlay() {
    if (audioElement.paused) {
        audioElement.play();
    }
    else {
        audioElement.pause();
    }
};
nlejzf6q

nlejzf6q3#

您可以使用jQuery对此进行切换。

<a id="music-button" style="cursor:pointer;">
<img src="http://i.stack.imgur.com/LT3WE.png"></a>
<audio id="playMusic" autoplay>
<source src="sound.mp3">
</audio>

<script type="text/javascript">
$('#music-button').toggle(
function () {
document.getElementById('playMusic').play();
},
function () {
document.getElementById('playMusic').pause();
}
);
</script>
xoefb8l8

xoefb8l84#

myAudio变量必须在函数调用内部...它工作正常
第一个

kxxlusnw

kxxlusnw6#

HTML格式

<audio controls autoplay class="bgsound">
  <source src="audio/motivational-day-112790.mp3" type="audio/wav" />
  <source src="audio/motivational-day-112790.mp3" type="audio/wav" />
  <source src="audio/motivational-day-112790.mp3" type="audio/wav" />
  Your browser does not support the audio element.
</audio>

Javascript语言

var audioClass = document.querySelector(".bgsound");
    document.querySelector(".play-pause").addEventListener("click", 
    function () {
    if (audioClass.paused) {
    audioClass.play();
     } else {
           audioClass.pause();
            }
     });

相关问题