web-dev-qa-db-ja.com

Javascriptオーディオクリックで再生

クリック時にサウンドを開始するJavaScriptコードがあります。 chromeで動作しますが、firefoxではonloadを開始しますが、そこでもonclickが必要です。

誰でも助けることができますか？

<script>
var audio = new Audio("http://music.ogg" ) ;

audio.oncanplaythrough = function(){
audio.play();
}

audio.loop = true;

audio.onended = function(){
audio.play();
}

</script>

<input type="image" src="http://button.png" onclick="audio.play()">
javascriptaudioonclick
32
dA_uNknOwN

これを試して

  <!DOCTYPE HTML>
  <html>
  <head>
  <title>Audio</title>
  </head>
  <body>

    <script>
  function play(){
       var audio = document.getElementById("audio");
       audio.play();
                 }
   </script>

<input type="button" value="PLAY"  onclick="play()">
<audio id="audio" src="http://dev.interactive-creation-works.net/1/1.ogg" ></audio>
 </body>
 </html>
60
Arunkumar

うまくいった

<audio src="${ song.url }" id="audio"></audio>
<i class="glyphicon glyphicon-play-circle b-play" id="play" onclick="play()"></i>

<script>
    function play() {
        var audio = document.getElementById('audio');
        if (audio.paused) {
            audio.play();
            $('#play').removeClass('glyphicon-play-circle')
            $('#play').addClass('glyphicon-pause')
        }else{
            audio.pause();
            audio.currentTime = 0
            $('#play').addClass('glyphicon-play-circle')
            $('#play').removeClass('glyphicon-pause')
        }
    }
</script>
3
Alex Karahanidi

JavaScript

function playAudio(url) {
  var a = new Audio(url);
  a.play();
}


HTML

<img src="image.png" onclick="playAudio('mysound.mp3')">


最新のブラウザのほとんどでサポートされており、HTML要素に簡単に埋め込むことができます。

2
Nurudin Imsirovic

Web Audio API がここにあり、 ブラウザサポート を取得しているので、より堅牢なオプションになります。

Zounds は、使用時に最小限の定型文でシンプルなワンショットサウンドを再生するためのAPIのプリミティブラッパーです。

1
Dave Elton