がどのようにJavaScriptの

Question

$(document).ready(function() { 
 

 
    var audioElement = document.createElement('audio'); 
 

 
    $('#play').click(function() { 
 

 
     audioElement.play(); 
 

 
    }); 
 

 
});

<script src="http://example.com/wp-content/playsounds.js"></script> 
 
    <button id="play" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"> 
 
    Button 
 
</button>

とオーディオボタンの複数のソースを使うのですか私はaudio要素のための複数のソースについての質問がありました。

私はこの問題は、私は多くの異なったページのために、同じページに複数の異なるソース/再生ボタンを必要としているPlay an audio file using jQuery when a button is clicked

でJavaScriptを使用してボタンを再生可能にするための良い方法をお読みください。

1つの解決策では、ページごとに、または各ボタンごとに別々の.jsファイルがあるようですが、htmlやcssで単純な解決策が必要であることがわかります。

基本的に私のページでは、さまざまなサウンドのボタンを用意したいだけで、簡単なsrcタグまたはsourceタグとそれぞれのサウンドファイルのアドレスを入れたいと思っています。

私のボタンにはMaterial Design Liteも使用しています。私のサイト上で

私の現在のコードは、あなたがそれをしたい任意の特定の理由がある、あなたは、オーディオ要素に言及されている例では、この

Answer 1

のように見える動的に作成されましたか？

<audio id="audio1" src="http://www.soundjay.com/misc/sounds/bell-ringing-05.mp3"></audio> 
<audio id="audio2" src="http://www.soundjay.com/misc/sounds/bell-ringing-03.mp3"></audio> 
<audio id="audio3" src="http://www.soundjay.com/misc/sounds/bell-ringing-04.mp3"></audio> 


<button data-id="audio1" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"> 
    Play audio 1 
</button> 

<button data-id="audio2" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"> 
    Play audio 2 
</button> 

<button data-id="audio3" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"> 
    Play audio 3 
</button> 

一つの方法は、持っているデータ-IDの後者の属性を与えることで「バインド」ボタンで各audio要素にある：あなたがページに望むように一般的に、あなたは、できるだけ多くのオーディオ要素を持つことができますオーディオIDと同じ値。 （私はプレーンなJSを使用することをお勧めだろうが）次にjQueryを使って：

$('button').on('click', function(){ 
    var audioId = $(this).data('id'); 
    $('#' + audioId).get(0).play(); 
    }) 

しかし、実際に、それはあなたがやろうとしているかに依存します。ペンhere