rernanded
Erfahrenes Mitglied
Hallo
wie kann ich am besten in einen Audio-Verlauf Events einbinden, wie zB das Anzeigen eines Textes/Images zu einem bestimmten Zeitpunkts des Playbacks.
Das hier habe ich, doch mein js ist gruselig. MONI
wie kann ich am besten in einen Audio-Verlauf Events einbinden, wie zB das Anzeigen eines Textes/Images zu einem bestimmten Zeitpunkts des Playbacks.
Das hier habe ich, doch mein js ist gruselig. MONI
HTML:
<style>
#modal{
display: none;
width: 60%;
height: 369px;
font-family: arial;
font-size: 60px;
color: #000;
}
</style>
<script>
</script>
</head>
<body>
<audio id="myAudio" src="123wow.mp3"></audio>
<div>
<button onclick="document.getElementById('myAudio').play();ModalOpen();ModalClose();">Play</button>
<button onclick="document.getElementById('myAudio').pause()">Pause</button>
<button onclick="document.getElementById('myAudio').volume += 0.1">Vol +</button>
<button onclick="document.getElementById('myAudio').volume -= 0.1">Vol -</button>
</div>
<button onclick="setCurTime();" type="button">Set time position to 3 seconds</button>
<p id="playbacktime"></p>
<div id="modal">
WOW
</div>
<script>
// Get the audio element with id="myAudio"
var audio = document.getElementById("myAudio");
// Attach a "timeupdate" event to the audio
audio.addEventListener("timeupdate", getCurTime);
// Display the current playback position of the video in a p element with id="demo"
function getCurTime() {
document.getElementById("playbacktime").innerHTML = "The current playback position is " + audio.currentTime + " seconds.";
}
// Set the current playback position to ...
function setCurTime() {
audio.currentTime = 3;
}
// Set events (= modal open and close ) at special playback times
var abc = document.getElementById("myAudio");
abc.addEventListener("timeupdate", ModalOpen);
function ModalOpen() {
setTimeout('modal.style.display = "block"', 3000);
}
abc.addEventListener("timeupdate", ModalClose);
function ModalClose() {
setTimeout('modal.style.display = "none"', 6000);
}
</script>