web-dev-qa-db-ja.com

HTMLページのボタンクリックですぐに音が鳴る

私の.htmlページには、番号をダイヤルするための9つの画像と、押された番号を示す1つのテキストボックスがあります。これらの各画像は、ユーザーがクリックするとすぐにビープ音を鳴らしてほしいです。非表示のプロパティでembedを使用し、そのソースを.wavサウンドに移動しようとしました。

大丈夫ですが、すぐに次々と画像を押していくと、音が出ず最後に1回だけ蜂が鳴ります。

「onclick」メソッドで.wavサウンドを再生するより速い方法はありますか？

前もって感謝します。

buttonclickplaysound
8
firefalcon

最近のブラウザのみをサポートする必要がある場合、HTML5はAudioオブジェクトを提供します

サウンドをロード/バッファリングするには：

var snd = new Audio("file.wav");

サウンドを再生するには：

snd.play();

それを最初に再キューするには（もう一度再生できるように）：

snd.currentTime=0;
16
paul

この回答 https://stackoverflow.com/a/7620930/145965 @klaustopher（ https://stackoverflow.com/users/767272/klaustopher ）が役に立ちました。彼が書きました：

HTML5には、サウンドの再生に使用できる新しい_<audio>_-タグがあります。非常にシンプルなJavaScriptインターフェースもあります。

<audio id="sound1" src="yoursound.mp3" preload="auto"></audio> <button onclick="document.getElementById('sound1').play();">Play it</button>

Font Awesome アイコン「fa-volume-up」（Webページの「mule。」の後にあります）をクリックすると「donkey2.mp3」のサウンドが再生されるように彼のアドバイスを実装した方法を次に示します（注：mp3はすべてのブラウザで再生されるわけではありません）。

_<p>In short, you're treated like a whole person, instead of a rented mule. <audio id="sound1" src="assets/donkey2.mp3" preload="auto"></audio><a class="icon fa-volume-up" onclick="document.getElementById('sound1').play();"></a>
_
9
Mark Gavagan

このコードを使用すると、画像ボタンを配置できます。クリックすると音が鳴ります。 Google ChromeおよびMicrosoft Edgeで動作しますが、Internet Explorerでは動作しません。html5コードを使用しています。コピーして貼り付け、独自のサンプルを追加してください。

</head>
<body>
<script>
var audio = new Audio("/Sample.wav ");
audio.oncanplaythrough = function ( ) { }
audio.onended = function ( ) { }
</script> <input type="image" src="file://C:/Sample.jpg" onclick="audio.play ( )">
</body>
</html>

コードの詳細については、 http://html5doctor.com/html5-audio-the-state-of-play/ を参照してください。

1
Glenda Webb

embed要素を使用してサウンドを再生できますが、さまざまなブラウザでサポートされている形式を確認する必要があります。

MDNに埋め込まれた要素

<a onclick="playSound('1.mp3')">
   <img src="1.gif">
</a>
<div id="sound"></div>

<script>
   var playSound = function (soundFile) {
      $("#sound").html("<embed src=\"" + soundFile + "\" hidden=\"true\" autostart=\"true\" />");
   }
</script>
1
jkutianski

受け入れられた回答に基づく例（Chrome 70でテスト済み）ですが、再キューする必要はありませんでした：

<button onclick="snd.play()"> Click Me </button>

<script>
    var snd = new Audio("/Content/mysound.wav"); 
</script>
0
Exel Gamboa