音楽ファイルを追加する

Question

"Music1"または "Music2"をクリックすると、別のオーディオが再生されるようにしようとしています。ページの下部にスクロール（それが具体的に「まだスクロールする必要があるだろうと呼ばれるものがわからない。

これで私を助けるために喜んで誰ですか？コードの下に。たくさんのことをお願い申し上げます。ありがとうございました。

http://hastebin.com/yupigijepe.xml

Answer 1

あなたがオーディオタグを使用することができます。

<audio src="example.midi" preload="auto" autoplay="autoplay"></audio> 

ほとんどのブラウザ今日はMIDIファイルをサポートするためのプラグインを持っていません。代わりに、MIDIファイルを再生するの、代用としてMP3ファイルを使用しています。このタグを使用すると、プレイを表示することができます間違いなく "Music1"へのリンクを持つよりも優れているかもしれないオーディオを再生するためにボタンを押してください。オーディオタグに関する

さらに詳しい情報： http://www.w3schools.com/tags/tag_audio.asp

EDIT：

使用HTML5 <audio>

<audio controls id="linkAudio"> 
    <source src="demo.ogg" type="audio/ogg"> 
    <source src="demo.mp3" type="audio/mpeg"> 
Your browser does not support the audio element. 
</audio> 

<script> 
document.getElementById("link_id").addEventListener("click", function() { 
document.getElementById("linkAudio").play(); 
}); 
</script> 

注：オーディオは、HTML5タグであるとして、それは古いブラウザをサポートしていませんが、ご使用の前に必ずお確かめください。

Answer 2

...

1）あなたは、アンカータグの代わりに、ボタンを使用するIDを追加し、ハイパーリンク参照を失うことを選択した場合： のhref =「＃」idは=「A1」>音楽1

2）完全にソースタグを削除それはオーディオタグ内にあります。次のステップで動的に追加します。

3）は、スクリプトタグの先頭にこのJavaScriptを追加します。

for (var i = 1; i <= 2; i += 1) { 
    var target = document.getElementById('music'); 
    var element = document.getElementById('a' + i); 

    element.addEventListener('click', function() { 
     switch (this.id) { 
      case 'a1': 
       target.innerHTML = '<source src="path/to/file1">'; 
       break; 
      case 'a2': 
       target.innerHTML = '<source src="path/to/file2">'; 
       break; 
     } 
    }); 
} 
// this is the same as before... 
var music = document.getElementById('music'); // id for audio element 

他のいくつかのポインタ：！の

• の冒頭でDOCTYPEを含めることは常に良い考えですあなたのhtmlファイル。
• htmlタグとbodyタグの間にあるようにスタイルタグを移動してください。

• このコードには多くのイベントリスナーがありますので、再生ボタンを目立たないようにしましょう。おそらく、これにスクリプトで遊び（）関数を再生ボタンからのonclick =「（遊ぶ）」を削除し、変更して：

  pButton.addEventListener('click', function() { 
       // start music 
       if (music.paused) { 
        music.play(); 
        // remove play, add pause 
        pButton.className = ""; 
        pButton.className = "pause"; 
       } else { // pause music 
        music.pause(); 
        // remove pause, add play 
        pButton.className = ""; 
        pButton.className = "play"; 
       } 
      });