Ich möchte den Start und die Pause einer Audiodatei auf zwei Arten steuern:
- die normalen Kontrollen, die mit der Option „controls“ angezeigt werden
- Ein Javascript hinter einem kleinen Symbol, das oben links auf dem Bildschirm schwebt.
Wenn also jemand die mp3 über das Bild ODER die Bedienelemente startet, sollte sie abgespielt und entweder durch Anklicken des Symbols oben links oder des normalen Players angehalten werden.
Aber es funktioniert nicht. Alles, was ich schaffe, ist, dass von zwei Playern, zwei Instanzen der gleichen mp3 abgespielt werden, aber wenn ich auf einen klicke, hat das keinen Einfluss auf die Wiedergabe des anderen…
Mein bisheriger Code
<!DOCTYPE html>
<html>
<head>
<style>
.float {
position: fixed;
width: 50px;
height: 50px;
top: -8px;
left: 0px;
background-color: rgba(182, 149, 105, 0.8);
color: #FFF;
border-radius: 50px;
text-align: center;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
z-index: 41000;
color: #fff4e3;
line-height: 0.8;
font-weight: bold;
}
.pur {
box-shadow: 0 0 0;
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<p><audio id="testAudio" src="https://www.liesenfeld.de/medis/beitrag-erotikmassage.mp3" hidden=""></audio><a id="playAudio" href="#"><i class="float" title="Klicke hier um den Text zu hören"><img class="bildpur-s pur" src="https://www.liesenfeld.de/WP/images/play-small.gif"></i></a></p>
<br><br>
Sowohl das Dreieck oben als auch <br>.
der untenstehende Player sollte die gleiche Wiedergabe steuern<br>br>
Derzeit werden aber zwei verschiedene Playbacks initiiert.
<p><audio id="testAudio" src="https://www.liesenfeld.de/medis/beitrag-erotikmassage.mp3" controls></audio><a id="playAudio" href="#"><i title="Klicke hier um den Text zu hören"></i></a></p>
<script type="text/javascript">
//<![CDATA[
window.onload=function() {
document.getElementById("playAudio").addEventListener("click", function() {
var audio=document.getElementById('testAudio');
if(this.className=='is-playing') {
this.className="";
this.innerHTML="<i class='float'><img class='bildpur-s pur' src='https://www.liesenfeld.de/WP/images/play-small.gif'></i>";
audio.pause();
}
else {
this.className="is-playing";
this.innerHTML="<i class='float'><img class='bildpur-s pur' src='https://www.liesenfeld.de/WP/images/pause-small.gif'></i>";
audio.play();
}
}
);
} //]]>
</script>
</body>
</html>