Tagger: audio tag

Beitrag lesen

SELF-Forum

audio tag

Tagger (Versionen)
– Informationen zu den Bewertungsregeln

Hallo zusammen,

danke vorab für eure Ideen und euren Einsatz. Ich wollte halt nicht die Funktionalität der vom Browser klassisch angebotenen Controlleiste per HTML5-Audio-tag haben, sondern diese Reduziert auf einen Button je Audio, welcher jweweils Play/Pause-Funktion zugleich hat, um die hier notwendige Benutzerfreundlichkeit zu erhöhen. Jeder Button muss eine andere Audio abspielen. Dies ist leider nicht der Fall. Es wird immer nur die zuerst angesteuerte Audio angesteuert. Klicke ich auf Button 1 Pause, und auf Button 2 Play läuft die identische Audio weiter ab.

Ich denke der Tipp von Martl ist schon der richtige Weg. Laufen tut es trotzdem nicht bei allem Ausprobieren. Anbei ein Codeaufbau. Die Buttons gestalte ich dann per CSS.

<body>

<!-- Erste Audio mit Button -->

<div>

<audio id="myAudio">
 <source src="audio/audio_1.mp3"
         type="audio/mp3">
 
 Your user agent does not support the HTML5 Audio element.
</audio>
<button type="button" onClick="aud_play_pause()">Play/Pause</button>
<script>
function aud_play_pause() {
  var myAudio = document.getElementById("myAudio");
  if (myAudio.paused) {
    myAudio.play();
  } else {
    myAudio.pause();
  }
}
</script>

</div>

<!-- Zweite Audio mit Button -->

<div>

<audio id="tester">
 <source src="audio/audio_2.mp3"
         type="audio/mp3">
 
 Your user agent does not support the HTML5 Audio element.
</audio>
<button type="button" onClick="aud_play_pause("tester")">Play/Pause</button>
<script>
function aud_play_pause()" {
  var tester = document.getElementById("tester");
  if (tester.paused) {
    tester.play();
  } else {
    tester.pause();
  }
}
</script>

</body>
Beitrag melden
–
Informationen zu den Bewertungsregeln