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. 
Danke.
Beiträge von Strider
-
-
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 !!!
-
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.
-
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">* 1993 † 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>