web-dev-qa-db-ja.com

1つのボタンまたはリンクでオーディオplay（）pause（）を切り替える方法は？

アンカータグがクリックされたときに再生されるオーディオファイルがあります。アンカータグが再度クリックされた場合、音声を一時停止させたいのですが、この後半を実行するためのJavaScriptについて十分に知りません。クリックするアンカータグのコンテンツを変更したくありません。タグをクリックするたびにオーディオファイルを開始および一時停止するだけです。

これは私がこれまでに持っているもので、少なくともサウンドファイルを再生可能にします：

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

必要なことを行うためのVanilla Javascriptの方法。

注：ネイティブjsアプローチの複数の賛成票に関する他の質問へのコメントに気づき、OPにはjqueryタグがありません。

（WORKING EXAMPLE：

SOLN 1：（イベントを使用する最初のsoln）

var myAudio = document.getElementById("myAudio");
var isPlaying = false;

function togglePlay() {
  if (isPlaying) {
    myAudio.pause()
  } else {
    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>
13
Iceman
var audioElement= document.getElementById("audio-player");
function togglePlay() {
    if (audioElement.paused) {
        audioElement.play();
    }
    else {
        audioElement.pause();
    }
};
4
Peter Isaac

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>
2
user4051844