Hinzufügen von Musikdateien

Question

Ich versuche es so zu machen, dass, wenn ich auf "Music1" oder "Music2" klicke, verschiedene Audiodateien abgespielt werden. Das Stellrad am unteren Rand der Seite (nicht sicher, was es speziell genannt wird,“nach wie vor blättern brauchen würde.

Wer bereit, mir dabei behilflich sein? Code unten. Wäre es eine Menge zu schätzen wissen. Danke.

http://hastebin.com/yupigijepe.xml

Answer 1

Sie den Audio-Tag nutzen könnten.

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

heute die meisten Browser haben keine Plugins MIDI-Dateien zu unterstützen. Stattdessen MIDI Dateien abspielen kann, MP3-Dateien als Ersatz verwenden. Mit diesem Tag, Sie könnte ein "Spiel" anzeigen Taste ', um den Ton abzuspielen, der sogar besser sein könnte, als einen Link zu "Music1" zu haben.

Weitere Informationen über die Audio-tag: http://www.w3schools.com/tags/tag_audio.asp

EDIT:

Verwenden 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> 

Hinweis: Als Audio ein HTML5-Tag ist, wird es nicht alte Browser unterstützen, Seien Sie also sicher, bevor Sie es verwenden.

Answer 2

Eine funktionierende Lösung ...

1) Wenn Sie Tags Anker statt Tasten verwenden, IDs hinzufügen und die Hyperlink-Referenz verlieren: a href = "#" id = "a1"> Musik 1

2) vollständig den Quelltag entfernen das ist innerhalb des Audio-Tags. Wir werden es im nächsten Schritt dynamisch hinzufügen.

3) Dieses JavaScript an den Anfang des Skriptes tag:

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 

Einige weitere Hinweise:

• Es ist immer eine gute Idee, eine DOCTYPE am Anfang sind von! Ihre HTML-Datei.
• Verschieben Sie Ihre Stil-Tag, so dass es zwischen den HTML- und Body-Tags ist

• Es gibt viele Event-Listener in diesem Code, also warum nicht auch die Play-Taste unaufdringlich machen? Vielleicht durch die Onclick = „play()“ aus der Play-Button zu entfernen und die Änderung die play() Funktion im Skript dazu:

  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"; 
       } 
      });