miholzi: Audio-Wiedergabe mittels Javascript

SELF-Forum

Audio-Wiedergabe mittels Javascript

miholzi (Versionen)
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich erstelle gerade eine einzelne HTML-Seite, die verschiedene Sounddateien bei Mausklick wiedergeben soll. Hatte das zuerst mit dem AUDIO-Objekt probiert, was einwandfrei funktionierte. Doch auf dem Tablet hat das Control-Element vom Aduio-Objekt mein Layout nicht so dargestellt wie ich möchte. Dann habe ich im Netz eine Anleitung gefunden, das mit hilfe eines Scripts zu erledigen. Das funktioniert prima, allerdings nur mit einer Audio-Datei, ich habe aber 12.

Das wäre mein Code:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Test</title>
    <link href="design.css" rel="stylesheet">
  </head>
  <body>
    <script type="text/javascript">
function toggleSound() {
  var audioElem = document.getElementById('audio');
  if (audioElem.paused)
    audioElem.play();
  else
    audioElem.pause();
}

</script> <p> <audio id="audio" preload="none"> <source src="audio/alpen.mp3"></audio>
      <button id="audio" type="button" onclick="javascript:toggleSound();">Start/Stop</button>
    <audio id="audio"> <source src="audio/alpen.mp3" type="audio/mpeg">Your browser does not support this audio format. </audio>
     
    <audio id="audio" preload="none"> <source src="audio/zug.mp3" type="audio/mpeg"> </audio>
    <button id="audio" type="button" onclick="javascript:toggleSound();">Start/Stop</button>
    <audio id="audio"> <source src="audio/zug.mp3" type="audio/mpeg">Your browser does not support this audio format. </audio>
    <br>
    </p>
    
  </body>
</html>

Ich kenne mich leider nur etwas aus und bin auf euere Hilfe angewiesen. Das sieht man schon daran, dass ich es nicht schaffe, den Quelltext hier ordentlich einzusetzen.

Vielen Dank für euere Hilfe, Michael

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Audio-Wiedergabe mittels Javascript

    Robert B.
    – Informationen zu den Bewertungsregeln

    Hallo @miholzi,

    das id heißt als Attribut eindeutig, das ist in deinem Code nicht der Fall. Du solltest dem Click-Handler des Buttons eine Information mitgeben, damit die Funktion weiß, welches Audio-Element du meinst.

    Formatierung von Code im Forum ist oberhalb des Speichern-Buttons angeboten.

    Viele Grüße
    Robert

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Audio-Wiedergabe mittels Javascript

    klawischnigg
    +1 Informationen zu den Bewertungsregeln

    Hi there,

    </script> <p> <audio id="audio" preload="none"> <source src="audio/alpen.mp3"></audio>

    Wenn alpen.mp3 das ist, wofür ich es halte, dann ist es eh wurscht, ob man das abspielen kann oder nicht…

    Im Ernst: zusätzlich zum von Robert gesagten: Du mußt einfach jedem Audio-Element eine eindeutige ID geben, über die Du es mit Javascript ansprechen kannst, also so zB.:

    <audio id="audio_1"><source src="audio/helenefischerkotz.mp3"></audio> <audio id="audio_2"><source src="audio/unsiunterseer.mp3"></audio> <audio id="audio_3"><source src="audio/nochirgendwas.mp3"></audio>

    Dann hast Du wie hier drei Audioobjekte, die Du über die eindeutige(!) Id identifizierst…

    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln