如何通過一個按鈕或鏈接切換音頻播放（）暫停（）？

Question

我有一個在單擊錨標記時播放的音頻文件。 如果再次單擊錨標記，我希望音頻暫停，我只是對 javascript 了解不夠，無法完成下半部分。 我不想更改他們點擊的錨標簽的內容，我只希望音頻文件在他們點擊標簽時開始和暫停。

這是我到目前為止所擁有的，它至少使聲音文件可以播放：

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

Answer 1

一種 Vanilla Javascript 方式來做你需要的。

注意：我注意到對其他問題的評論對原生 js 方法有多個贊成票，並且看到 OP 沒有jquery標簽。

所以WORKING EXAMPLE ：

SOLN 1 :(我最初使用事件的解決方案）

 var myAudio = document.getElementById("myAudio"); var isPlaying = false; function togglePlay() { isPlaying ? myAudio.pause() : myAudio.play(); }; myAudio.onplaying = function() { isPlaying = true; }; myAudio.onpause = function() { isPlaying = false; };

 <audio id="myAudio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto"> </audio> <a onClick="togglePlay()">Click here to hear.</a>

SOLN 2 :（根據dandavi 的評論使用myAudio.paused屬性）

 var myAudio = document.getElementById("myAudio"); function togglePlay() { return myAudio.paused ? myAudio.play() : myAudio.pause(); };

 <audio id="myAudio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto"> </audio> <a onClick="togglePlay()">Click here to hear.</a>

Answer 2

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

Answer 3

您可以使用 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>

Answer 4

myAudio 變量必須在函數調用中......它工作正常

 function togglePlay() { var myAudio = document.getElementById("myAudio"); return myAudio.paused ? myAudio.play() : myAudio.pause(); };

 <audio id="myAudio" src="https://clubajax.pythonanywhere.com/media/contact/backgroundM.mp3" preload="auto"> </audio> <input type="button" value="sound" onclick="togglePlay()" />

Answer 5

var Sample-Audio = document.getElementById("Sample");

function togglePlay() {
  return Sample-Audio.paused ? Sample-Audio.play() : Sample-Audio.pause();
};

<audio id="Sample" preload="auto">
  <source src="./sounds/rain.mp4" type="audio/mp4">
  <source src="./sounds/rain.ogg" type="video/ogg"> 
</audio>
<a onClick="togglePlay()">Click here to hear.</a>

Answer 6

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();
            }
     });