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>