2

チャット アプリケーションを作成していますが、その機能の 1 つに音声の送信があります。送信される HTML は次のとおりです。

<p>
   <audio autoplay>
      <source src="sounds/lol.mp3" type="audio/mpeg">
   </audio>
   LOL
   <a href="#" id="soundStop">Stop</a>
   <a href="#" id="soundPlay" style="display:none;">Play</a>
</p>

「自動再生」は、最初に送信されたときに正常に機能します。そのため、何度でもサウンドを再生するには、再生/停止リンクが必要です。私は次のJavascriptを持っています:

$(document).on('click', '#soundStop', function(e) {
    $(this).hide();
    $(this).next("a").show();
    $('audio').each(function(){
        this.pause();
        this.currentTime = 0;
    });
    e.preventDefault();
});

$(document).on('click', '#soundPlay', function(e) {
    $(this).hide();
    $(this).prev("a").show();
    $(this).closest("audio").play();
    //alert("play sound again!");
    e.preventDefault();
});

stop 関数は機能します (ただし、すべての「オーディオ」要素をターゲットにするのが良い考えかどうかはわかりません)。しかし、2 番目の関数でオーディオ要素を .play() の対象にする方法に行き詰まっています。私はこれを完全に間違った方法で行っているのでしょうか？

ヘルプやアドバイスをいただければ幸いです。

編集：明確にするために、送信されるこれらのサウンドのインスタンスが複数ある可能性があるため、それぞれの特定の「オーディオ」のみをターゲットにする方法が必要です。

4

1 に答える 1

4

オーディオ タグの Ready to Use Controls を使用しないでください。それはあなたの目的に役立ちます。

このコードを試してください:

<!DOCTYPE html>
<html>
<body>
   <audio autoplay controls>
       <source src="horse.ogg" type="audio/ogg">
   </audio>

</body>
</html>

顧客管理

<!DOCTYPE html>
<html>
<body>
 <audio id="player" src="horse.ogg"></audio>
<div>
    <button onclick="document.getElementById('player').play()">Play</button>
    <button onclick="document.getElementById('player').pause()">Pause</button>
    <button onclick="document.getElementById('player').volume+=0.1">Volume Up</button>
    <button onclick="document.getElementById('player').volume-=0.1">Volume Down</button>
</div>
</body>
</html>
于 2013-06-29T14:47:26.040 に答える