web-dev-qa-db-ja.com

ボタンのクリック時にビープ音を鳴らす

ここでいくつかの答えを読みましたが、まったく助けにはなりませんでした（実際、どれも答えとして受け入れられていません）

質問は、「ビープ音を再生する」on「ボタンクリック」

私はタッチスクリーンデバイスで動作するウェブサイトを作成しようとしていますので、すべてのボタンクリックイベントがビープ音を再生し、ウェブサイトを使用しているユーザーにとってより良いはずです。ビープ音ファイルはこちら： http://www.soundjay.com/button/beep-07.wav Googleでのみこの作業が必要ですChrome（HTML5をサポート）

私はこれがクライアント側で動作する必要があることを理解しているので、これを試しました：

Javascript：

<script>
    function PlaySound(soundObj) {
        var sound = document.getElementById(soundObj);
        sound.Play();
    }
</script>

HTML

<embed src="/beep.wav" autostart="false" type="audio/mpeg" loop="false" width="0" height="0" id="beep" enablejavascript="true" />
<asp:LinkButton ID="lbtnExit" runat="server" OnClick="lbtnExit_Click" OnClientClick="PlaySound('beep')" CssClass="btn btn-lg btn-danger" Text="Exit <i class='fa fa-sign-out' style='font-size: 40px'></i>"></asp:LinkButton>

しかし、それは機能しません。ボタンをクリックしても何も起こりません。

javascriptjqueryasp.nethtml5embed
27
Ronaldinho Learn Coding

次のような音声タグを使用できます。

    <audio id="audio" src="http://www.soundjay.com/button/beep-07.wav" autoplay="false" ></audio>
    <a onclick="playSound();"> Play</a>
    <script>
    function playSound() {
          var sound = document.getElementById("audio");
          sound.play();
      }
    </script>

Plunker です

44
netrevisanto

すでに<div class='btn'>Click to play!</div>

シンプルなアプローチ（HTMLなし）

var audio = new Audio('audio.mp3'); // define your audio

$('.btn').click( () => audio.play() ); // that will do the trick !!

TO GO FURTHER素早く音をトリガーできる

ただし、1つをクリックしてリフリングしようとすると、.btnプレーヤーは、サウンドの終わりを待って、別のサウンドをトリガーできるようにします（他のすべてのソリューションも同様です）。これを取り除くために、これが私が見つけた唯一の解決策です：

// array with souds to cycle trough
// the more in the array, the faster you can retrigger the click 
var audio = [new Audio('audio.mp3'), new Audio('audio.mp3')];
var soundNb = 0; // counter

$('.btn').click( () => audio[ soundNb++ % audio.length ].play());

WORKING DEMO

8
538ROMEO

これはうまくいきます

function playSound () {
    document.getElementById('play').play();
}
<audio id="play" src="http://www.soundjay.com/button/beep-07.wav"></audio>

<button onclick="playSound()">Play</button>
7
Downgoat

生のJavaScriptを使用すると、次を呼び出すことができます。

new Audio('sound.wav').play()
5
Joe Iddon

技術的には、以下はビープ音の「再生」に関する質問には答えませんが、ビープ音を「生成」する方法を尋ねる場合は、 このWebサイト で見つけた次のコードを検討してください。

_a=new AudioContext()
function beep(vol, freq, duration){
  v=a.createOscillator()
  u=a.createGain()
  v.connect(u)
  v.frequency.value=freq
  v.type="square"
  u.connect(a.destination)
  u.gain.value=vol*0.01
  v.start(a.currentTime)
  v.stop(a.currentTime+duration*0.001)
}
_

呼び出しのサンプル値：beep(20, 100, 30)。前述のWebサイトには、詳細とサウンドのサンプルが含まれています。

音は、ボタンのクリックに応答するか、プログラムで自由に生成できます。 Chromeで使用しましたが、他のブラウザでは試していません。

0
Alan M.

私を夢中にさせていましたが、JQueryを使用して解決策を見つけました...実際にはそれを行うための最良の方法ではありませんが、それは適切に機能しました...

function Ding() {
      $("body").append('<embed src="/Ding.mp3" autostart=false autoplay=false type="audio/mpeg" loop="false" width="0" height="0" id="beep" enablejavascript="true" />');
      setTimeout(function(){ $("#beep").remove(); },2000);
}

埋め込みタグが実際にどれだけ必要なのかはわかりませんが、動作し始めたら、書き込みを停止しました（別のソリューションからコピーを埋め込みます）。

これが他の誰かに役立つことを願っています

0
thphoenix