audio tag

[tagger]

Hallo zusammen,

ich will mehrere Audio-Dateien in HTML möglichst benutzerfreundlich und einfach mit mehreren Buttons per Klick verknüpfen und nur eine Start- und Pause-Funktion anbieten.

Dazu habe ich das dritte Beispiel Script von "https://www.w3.org/wiki/HTML/Elements/audio" herangezogen.

<audio id="myAudio"
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"
         type='audio/mp4'>
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"
         type='audio/ogg; codecs=vorbis'>
 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>

Ziel ist es mit drei Buttons jeweils eine andere MP3 zu starten. Diesbezglich habe ich den Code entsprechend dreimal kopiert und die Quelle angepasst.

Mein bisheriges Resultat ist, dass auf jedem der Buttons die gleich Audio-Datei abgespielt wird, obwohl ich den Pfad korrigiert habe.

Eine Anpassung der ID hat mich bisher auch nicht weitergebracht. Jedoch bin ich auch recht unerfahren im JS-Bereich.

Über eure Hilfe wurde ich mich sehr freuen.

Mit Dank im Voraus

[Matthias Apsel]

Hallo tagger,

<audio id="myAudio"
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"
         type='audio/mp4'>

Zumindest in diesem Codeauszug ist das öffnende audio-Tag nicht geschlossen.

Bis demnächst
Matthias

[tagger]

Danke für die schnelle Antwort. Dies war nur ein Copy-Fehler. Leider komme ich nicht weiter. Ich freue mich daher über Hilfe.

[Matthias Apsel]

Hallo tagger,

<audio id="myAudio">
…
  var myAudio = document.getElementById("myAudio");

Ziel ist es mit drei Buttons jeweils eine andere MP3 zu starten. Diesbezglich habe ich den Code entsprechend dreimal kopiert und die Quelle angepasst.

Hast du dann auch dreimal <audio id="myAudio"> im Code?

Bis demnächst
Matthias

[tagger]

Ich habe drei Container angelegt, indem ich versucht habe mit verschiedenen IDs diese anzuprechen.

Hier ein Beispiel, welches ich zusätzlich zur <audio id="myAudio"> angelegt habe:

<audio id="tester">
 <source src="audio/testaudio.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 tester = document.getElementById("tester");
  if (tester.paused) {
    tester.play();
  } else {
    tester.pause();
  }
}
</script>

Trotzdem spielt immer nur die selbe Audio, egal welcher Button.

[Martl]

Hallo tagger,

und wie teilst Du function aud_play_pause() mit - ich gehe davon aus, daß es nur eine dieses Namens gibt - welches audio gemeint ist?

Ich vermisse sowas:

Absender

onClick="aud_play_pause('tester')"

Empfänger

function aud_play_pause(e) { 
 var tester = document.getElementById(e);
  if (tester.paused) {
    tester.play();
  } else {
    tester.pause();
  }
 }

Grüße, Martl

[marctrix]

Hej tagger,

ich will mehrere Audio-Dateien in HTML möglichst benutzerfreundlich und einfach mit mehreren Buttons per Klick verknüpfen und nur eine Start- und Pause-Funktion anbieten.

Ich merke gerade, dass ich offenbar seit Jahren(!) auf keiner Webseite mehr Audio-Dateien einbinden musste und habe mein eigenes Beispiel auch seit einem Jahr nicht mehr angefasst.

Daher musste ich erst mal kramen. Wenn ich dich recht verstehe, möchtest du doch gar nicht mehr als das folgende:

<audio controls>
  <source src="foo.ogg" type="audio/ogg" /> Ihr Browser unterstützt kein HTML5-Audio
</audio>

Funktioniert in praktisch jedem Browser (hier ein audio-Beispiel zum ausprobieren)…

Marc

[Tagger]

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>

[marctrix]

Hej Tagger,

Ich kann zwar kein Javascript, aber ich bin mir sicher, dass man auch dort Anführungsstriche nicht ineinander verschachtelten darf 😉

Marc

[Martl]

Hallo tagger,

so verwendet muß eine Funktion einen eindeutigen Namen haben! Näheres zu Funktionen siehe im Wiki.

Hier ein Beispiel:

<!DOCTYPE HTML>
<html lang="de">	
	<head>		
		<meta charset="utf-8">		
		<title>Audio
		</title>		
		<script>
			function aud_play_pause(e) {
				var myaudio = document.getElementById(e);
				if (myaudio.paused) {
					myaudio.play();
				} else {
					myaudio.pause();
				}
			}
		</script>	
	</head>	
	<body>
		<audio id="audio_1" src="https://wiki.selfhtml.org/local/Europahymne.mp3" type="audio/mp3">  
			Your user agent does not support the HTML5 Audio element. 
		</audio>
		<button type="button" onClick="aud_play_pause('audio_1')">
			Play/Pause
		</button>
		<hr>
		<audio id="audio_2" src="https://wiki.selfhtml.org/local/Europahymne.mp3" type="audio/mp3">  
			Your user agent does not support the HTML5 Audio element. 
		</audio>
		<button type="button" onClick="aud_play_pause('audio_2')">
			Play/Pause
		</button>
	</body>
</html>

onclick übergibt als Argument die ID des Audioelements an die Funktion; e als Variable enthält dann die ID und die Funktion wird im Kontext des damit angesprochenen Audioelements ausgeführt.

Grüße, Martl

[Robert B.]

Moin Tagger,

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.

Also ich finde, dass zumindest der Lautstärkeregler die Benutzerfreundlichkeit schon deutlich erhöht. Die Standardfunktionalität Play/Pause, Zeitanzeige und Lautstärke finde ich sehr benutzerfreundlich.

Jeder Button muss eine andere Audio abspielen.

Das macht der Audio-Tag mit Controls per Default so.

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.

Das wird wohl daran liegen, dass es von deiner JavaScript-Funktion zwei Versionen gibt statt einer. Zudem übergibst du die Id des audio-Elements nur in einem Fall, wertest sie aber in deiner Funktion gar nicht aus.

Viele Grüße
Robert