Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript JavaScript play audio segment

avaj

New Coder
I need to call a script and specify 3 parameters, audio file ID, audio start time, audio end time (optional).

With zero prior JS knowledge, I'm unable to get this script I stitched together to work flawlessly. The main bug now is that if EventListener is active and a segment is still playing, and the user clicks on another segment, it should cancel the active EventListener and assign a new one if end time is specified.

Any help would be great.



HTML:
    <!DOCTYPE html>
    <script>
        function audio_play(fileID, sTime, eTime){
            var audio = document.getElementById(fileID);
            var segmentEnd;
            
            audio.pause();
            audio.currentTime = 0;
            audio.addEventListener('timeupdate', function (){
                if (segmentEnd && (audio.currentTime >= segmentEnd)) {
                    audio.pause();
                    segmentEnd = 0;
                    audio.currentTime = 0;
                }
                console.log(audio.currentTime);
            }, false);
            audio.currentTime = sTime;
            segmentEnd = eTime;
            audio.play();
        }
    </script>

    <body>
        <html lang="en">
        <audio id="id1" src="1.mp3" controls preload></audio>
        <audio id="id2" src="2.mp3" controls preload></audio>

        <p><a href="javascript:audio_play('id1', 15,  20);">File 1 / Segment (15-20)</a></p>
        <p><a href="javascript:audio_play('id1', 60, 65);">File 1 / Segment (60-65)</a></p>
        <p><a href="javascript:audio_play('id1', 20);">File 1 / Segment (20 ...)</a></p>
        <br>
        <p><a href="javascript:audio_play('id2', 20);">File 2 / Segment (15-20)</a></p>
        <p><a href="javascript:audio_play('id2', 20);">File 2 / Segment (30-35)</a></p>
        <p><a href="javascript:audio_play('id2', 20);">File 2 / Segment (40 ...)</a></p>
    </body>
    </html>
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom