Javascript Audio Html

Question

I'm trying to make an audio player with html and javascript. Every time someone clicks play, it plays the audio files that are selected in the check boxes: https://gyazo.com/9c93954e89dcd975ed47956b8563b177

HTML Audio

 <audio id="player">

 </audio>

HTML checkboxes

<div class="card">
    <div class="card-header" id="headingTwo">
        <h5 class="mb-0"><a href="#!" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo" class="">Collapsible
                Test1</a></h5>
    </div>
    <div id="collapseTwo" class="card-body collapse show" aria-labelledby="headingTwo" data-parent="#accordionexample" style="">
    
            <div class="title-choice">
                <input type="checkbox" class="form-check-input" name="1.mp3" id="playable_file">
                <label for="">1.mp3</label>
            </div>

        
            <div class="title-choice">
                <input type="checkbox" class="form-check-input" name="2.mp3" id="playable_file">
                <label for="">2.mp3</label>
            </div>

         
    </div>
    </div>

play_files.js

var i;
var ii;

var checked;

function save_files() {

    i = 0;
    ii = 0;

    checked = []; 

    $("input[id='playable_file']:checked").each(function ()
    {
        checked.push($(this).attr("name"));
    });  

    addNumber (); 
    play_files ();
    setInterval(function() {check(); }, 3000);

}

function addNumber () {
    if(i != 0) { 
        document.getElementById("audio" + i - 1).remove();
    }
    var container = document.createElement('source');
    container.src = "./audiofiles/" + checked[i]; 
    container.id = "audio" + i;
    container.type = "audio/mpeg";

    $('#player').append(container);

    i++
}

function check () {

    if(ii != 0) {
        document.getElementById("player").onended = function(){
            play_files();
        };
    }
    
}

function play_files() {

    document.getElementById("player").play();

}

The thing is on chrome, but the sound doesn't work at all. On Firefox, it plays the first selected audio file, but then just full on errors.

error: Uncaught TypeError: document.getElementById(...).ended is not a function.

and

warning: Cannot play media. No decoders for requested formats: audio / mpeg.

So to sum it up -> I get errors on the second file. I can't play the sounds in chrome, And I don't really know how to start the next file after a certain time after the first audio file stops.

Thanks!

question from:https://stackoverflow.com/questions/65946101/javascript-audio-html

Answer 1

Instead of .Ended();, you can use .onended and set it to a function with what you want it to run.

Other audio types are audio/mpeg3, audio/x-mpeg, and audio/x-mpeg-3. See if any of those work.

Example of onended:

document.getElementById("sound").onended = function(){
    alert("The sound ended.")
};