Automatically playing audio HTML element

Question

I want to create a playlist on my site. I want my site to do if one audio track is finished then the second audio in playlist would play by itself.

Here is my HTML:

<body style="background-color:#A9A9A9">
<div class="container" style="width:60%;">
    <div class="row main">
    <div class="panel-heading">
            <div class="panel-title text-center">
               <h1 class="title">Listen</h1>
               <hr />
        <audio id="audio" preload="auto" tabindex="0" controls="" >
            <source src="http://jezecek.nostools.cz/music/cc.mp3">
             Your Fallback goes here
        </audio>
        <ul id="playlist">
            <li class="active">
                <a href="http://jezecek.nostools.cz/music/cc.mp3">
                 cc
                </a>
            </li>
            <li>
                <a href="http://jezecek.nostools.cz/music/gg.mp3">
                gg
                </a>
            </li>
            </ul>   
        </div>
        </div>
    </div>
</div>

And here Javascript that doesnt work (screenshot):

https://gyazo.com/278e432d299ac1cef0f57f939c28bd94

Thanks for any help or advice

please add the js code in your question, do not link to a screenshot. — Jeff, Jun 23 '17 at 21:33
In future copy the code to your question instead of sending a screenshot — Chris Satchell, Jun 23 '17 at 21:33
check this out: https://stackoverflow.com/questions/44706924/java-script-all-audio-plays-at-once-when-attempting-to-play-audio-one-by-one-in — Hopeless, Jun 23 '17 at 21:35
have you tried to figure out _what_ part of the js doesn't work? — Jeff, Jun 23 '17 at 21:36
Well I tried to add a code as usual, but for some reason the syntax just wasnt showing as it should. Yes, the console is printing this error: Uncaught TypeError: Cannot set property 'volume' of undefined at init (playlist.js:8) at playlist.js:1 — Adam Šulc, Jun 23 '17 at 21:38

score 1 · Accepted Answer · answered Jun 23 '17 at 21:54

One thing you could do, is use an iframe and then with JavaScript, you have a setTimeout() function that will go after a certain time. This way, with Javascript, after a certain amount of time (however long into the video you want it to change videos), it would change the source of the other video.

score 0 · Answer 2 · answered Jun 23 '17 at 21:38

To trigger 'on the end of playback' on either audio or video, you use this tag <audio|video onended="myScript"> where the script is in javascript. So you use javascript to control the second audio. I used jQuery html element to replace the html and trigger autoplay.

Automatically playing audio HTML element

2 Answers2