Probleme mit <audio>

  • Das Problem gestaltet sich relativ einfach. Auf der Seite stehen 6 Audiotracks als mp3 zur Verfügung.

    Mittels onclick="document.getElementById('Track1').play()" wird der erste Track abgespielt

    Wenn bereits ein Track wiedergegeben wird und ich einen anderen Track wähle, werden beide Tracks wiedergegeben.

    Werden alle Tracks angewählt werden auch alle Tracks gleichzeitig abgespielt - was ntürlich keinen Sinn macht.

    Ich hätte gern eine Möglichkeit das nur jeweils 1 Track wiedergegeben werden kann.

    Vielen Dank für Ihre Aufmerksamkeit.

    <!DOCTYPE html>
    <html>
    <head>
    <title>My Music on Web</title>
    <meta charset="UTF-8" />
    <link href="Rockstar.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
    <audio id="Track1" src="./playlist/Track1.mp3"></audio>
    <audio id="Track2" src="./playlist/Track2.mp3"></audio>
    <audio id="Track3" src="./playlist/Track3.mp3"></audio>
    <audio id="Track4" src="./playlist/Track4.mp3"></audio>
    <audio id="Track5" src="./playlist/Track5.mp3"></audio>
    <audio id="Track6" src="./playlist/Track6.mp3"></audio>
    </body>
    <!-- -----------------------------------Seiteninhalt---------------------------------- -->
    <h1 style="padding-top:12%;">Name of the Band</h1>
    <h2 class="TBF">*&nbsp;1993&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&dagger;&nbsp;1997</h2>
    <table style="position:relative;z-index:2" align="center">
    <tr>
    <th style="padding-top:65px;">
    <!-- -------------------------------------------------------------------------------------------------------- -->
    <div>
    <a class="SYM" href="#" onclick="document.getElementById('Track1').play()">d</a>
    <a class="SYM" href="#" onclick="document.getElementById('Track1').currentTime = 0; document.getElementById('Track1').play();">h</a>
    <a class="SYM" href="#" onclick="document.getElementById('Track1').pause()">k</a>
    <a class="SYM" href="#" onclick="document.getElementById('Track1').currentTime = 0;document.getElementById('Track1').pause();">i</a>
    <a class="TBF"><span>Track1</span></a>
    </div>
    </th>
    </tr>
    <tr>
    <th>
    <!-- -------------------------------------------------------------------------------------------------------- -->
    <div>
    <a class="SYM" href="#" onclick="document.getElementById('Track2').play()">d</a>
    <a class="SYM" href="#" onclick="document.getElementById('Track2').currentTime = 0; document.getElementById('Track2').play();">h</a>
    <a class="SYM" href="#" onclick="document.getElementById('Track2').pause()">k</a>
    <a class="SYM" href="#" onclick="document.getElementById('Track2').currentTime = 0; document.getElementById('Track2').pause();">i</a>
    <a class="TBF"><span>Track2</span></a>
    </div>
    </th>
    </tr>
    <tr>
    <th>
    <!-- -------------------------------------------------------------------------------------------------------- -->
    <div>
    <a class="SYM" href="#" onclick="document.getElementById('Track3').play()">d</a>
    <a class="SYM" href="#" onclick="document.getElementById('Track3').currentTime = 0; document.getElementById('Track3').play();">h</a>
    <a class="SYM" href="#" onclick="document.getElementById('Track3').pause()">k</a>
    <a class="SYM" href="#" onclick="document.getElementById('Track3').currentTime = 0; document.getElementById('Track3').pause();">i</a>
    <a class="TBF"><span>Track3</span></a>
    </div>
    </th>
    </tr>
    <tr>
    <th>
    <!-- -------------------------------------------------------------------------------------------------------- -->
    <div>
    <a class="SYM" href="#" onclick="document.getElementById('Track4').play()">d</a>
    <a class="SYM" href="#" onclick="document.getElementById('Track4').currentTime = 0; document.getElementById('Track4').play();">h</a>
    <a class="SYM" href="#" onclick="document.getElementById('Track4').pause()">k</a>
    <a class="SYM" href="#" onclick="document.getElementById('Track4').currentTime = 0; document.getElementById('Track4').pause();">i</a>
    <a class="TBF"><span>Track4</span></a>
    </div>
    </th>
    </tr>
    <tr>
    <th>
    <!-- -------------------------------------------------------------------------------------------------------- -->
    <div>
    <a class="SYM" href="#" onclick="document.getElementById('Track5').play()">d</a>
    <a class="SYM" href="#" onclick="document.getElementById('Track5').currentTime = 0; document.getElementById('Track5').play();">h</a>
    <a class="SYM" href="#" onclick="document.getElementById('Track5').pause()">k</a>
    <a class="SYM" href="#" onclick="document.getElementById('Track5').currentTime = 0; document.getElementById('Track5').pause();">i</a>
    <a class="TBF"><span>Track5</span></a>
    </div>
    </th>
    </tr>
    <tr>
    <th>
    <!-- -------------------------------------------------------------------------------------------------------- -->
    <div>
    <a class="SYM" href="#" onclick="document.getElementById('Track6').play()">d</a>
    <a class="SYM" href="#" onclick="document.getElementById('Track6').currentTime = 0; document.getElementById('Track6').play();">h</a>
    <a class="SYM" href="#" onclick="document.getElementById('Track6').pause()">k</a>
    <a class="SYM" href="#" onclick="document.getElementById('Track6').currentTime = 0; document.getElementById('Track6').pause();">i</a>
    <a class="TBF"><span>Track6</span></a>
    </div>
    </th>
    </tr>
    </table>
    </html>

  • Warum nimmst Du nicht einfach Buttons für die Steuerknöpfe?
    Vor dem Abspielen eines Track ermittele alle audio-Elemente und stoppe sie:

    Code
    <script>
    function myPlay(id) {
    var audios = document.getElementsByTagName('audio');
    for (var i = 0; i < audios.length; i++) {
    audios[i].pause();
    }
    document.getElementById(id).play();
    }
    </script>


    HTML:

    HTML
    <a class="SYM" href="#" onclick="myPlay('Track1');">d</a><a class="SYM" href="#" onclick="document.getElementById('Track1').currentTime = 0; myPlay('Track1');">h</a>
    <a class="SYM" href="#" onclick="document.getElementById('Track1').pause()">k</a>
    <a class="SYM" href="#" onclick="document.getElementById('Track1').currentTime = 0;document.getElementById('Track1').pause();">i</a>
    <a class="TBF"><span>Track1</span></a>

    usw.

  • Danke fürs schnelle feedback.


    habe das script wie im Vorschlag beschriebenden eingebaut aber der link (Buchstabe d) ist anschließend ohne Funktion. Keine Wiedergabe.


    Zu der Frage warum ich keine Buttons nehme, ich habe eine 2te Schriftart eingebunden (class"SYM") - Von jener nutze ich die Zeichen Play Pause Rewind und Stop. Passend zum Layout der gesamten Seite.

  • Wie empfohlen script ersetzt und jetzt für 2 Tracks im Wechsel getestet. Hut ab ! Frage verstanden und Problem gelöst in < 24h/Registrierung.


    Danke sehr !!! :thumbup:

  • Ich hab das script um eine Sache erweitert..

    <script>
    function myPlay(id) {
    var audios = document.getElementsByTagName('audio');
    for (var i = 0; i < audios.length; i++) {
    audios[i].pause();
    audios[i].currentTime = 0;
    }
    document.getElementById(id).play();
    }
    </script>

    Jetzt startet der Track unter Play immer von neuem.Hiermit ist die Baustelle komplett gemeistert. :D Danke.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!