15

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

正常に動作していますが、すぐに画像を次々と押すと、音が出ず、最後に一回だけハチになります。

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

4

6 に答える 6

21

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

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

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

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

snd.play();

それを最初に再キューするために（あなたがそれを再びプレイできるように）：

snd.currentTime=0;
于 2012-10-18T12:01:01.790 に答える
13

@klaustopher（https://stackoverflow.com/users/767272/klaustopher ）によるこの回答https://stackoverflow.com/a/7620930/1459653は私を助けました。彼が書きました：

HTML5には、<audio>サウンドの再生に使用できる新しい-Tagがあります。非常にシンプルな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>
于 2015-09-26T18:19:37.720 に答える
1

サウンドの再生には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>
于 2013-11-28T00:26:56.147 に答える
1

このコードを使用すると、画像ボタンを配置できます。クリックすると音が鳴ります。GoogleChromeとMicrosoftEdgeで動作しますが、InternetExplorerで動作させることができません。私は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/をご覧ください。

于 2015-12-03T03:45:38.813 に答える
1

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

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

<script>
    var snd = new Audio("/Content/mysound.wav"); 
</script>
于 2018-11-28T15:09:10.373 に答える
0

これは、効果音を再生するために私が行うことです。

    <html>
            <body>
        <audio id="sfx"><source src="mysound.mp3"></audio>
            <button onclick="playsound()" id="button">Play a sound!</button>
            <script> function playsound() {
    
    var sfx = document.getElementById("sfx");
    sfx.autoplay = 'true';
sfx.load();}

または、次のスニペットを実行できます。

function playsound() {
  var mysound = document.getElementById("mysound");
  mysound.autoplay = 'true';
  mysound.load();
}
button {
  color: blue;
  border-radius: 24px;
  border: 5px solid red;
}

body {
  background-color: #bfbfbf;
}
<html>

<body>
  <audio id='mysound'><source src="click.mp3"><!-- "click.mp3" isn't a sound effect uploaded to the snippet, because I don't think you can upload sfx to snippets. (I'm new to stackoverflow, so there might be a way) But if you actually use a sound effect in that folder that you're using, it works.  --></audio>
  <button id='btn' onclick='playsound()'>Play a sound!</button>
</body>

</html>

于 2021-05-20T23:07:17.893 に答える