Events in Audioverlauf einbinden

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
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>
 
Hallo Moni,
gruselig würde ich nicht unbedingt sagen, bloß etwas unentschieden: Mal registrierst Du Eventlistener inline und mal mit addEventListener.
Mit der Funktion getCurTime bist Du aber schon auf dem richtigen Weg. Versuche, sie so zu erweitern:
Code:
// Perform actions based on the current playback position
function getCurTime() {
    document.getElementById("playbacktime").innerHTML = "The current playback position is " + audio.currentTime + " seconds.";
    const
        tim = audio.currentTime,
        img = document.getElementByID('playback-img)';
    if (tim >= 150) {
        // Die Zeit ist größer oder gleich 150 Sekunden,
        // das entspr. Bild anzeigen:
        img.src = 'images/img150.jpg';
        // Hier ggf. weitere Aktionen für diesen Zeitraum
    } else
        // Die Zeit ist kleiner als 150 Sekunden
        // Ist sie größer oder gleich 120 Sekunden?
    if (tim >= 120) {
        img.src = 'images/img120-150.src';
        // Hier ggf. weitere Aktionen für diesen Zeitraum
    } // Hier ggf. die Abfragen für weitere Zeiten ergänzen
}
(Dies ungetestet)
Man könnte das noch etwas eleganter machen, indem man die Zeiten und Bilder in einem Array speichert aber ich denke, so ist es erst Mal besser verständlich.
Und, je nachdem wie oft das Event feuert und wie umfangreich die Aktionen sind, könnte es angebracht sein, sie nur auszuführen wenn sich der Zeitraum ändert.
 

Neue Beiträge

Zurück