Javascript Audio Html

I’m trying to make a 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"));
    });  
    
    var container = document.createElement('source');
    container.src = "./audiofiles/" + checked[i]; 
    container.id = "audio" + i;
    container.type = "audio/mpeg";

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

    i++


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

}

function check () {
    
    var ended = document.getElementById('player').ended();

    if (ended == true) {
        alert('okay');
    }
}

function play_files() {

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

    ii++




}

The thing is on chrome the sound doesn’t work at all but 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 dont really know how to start the next file after a sertend time after the first audio file stopt.

Thanks!

93 thoughts on “Javascript Audio Html”

  1. Great post. I was checking constantly this blog
    and I’m impressed! Very useful information specially the last part :
    ) I care for such info a lot. I was seeking this particular info for a
    very long time. Thank you and good luck.

    Reply
  2. Appreciating the time and effort you put into your site
    and detailed information you provide. It’s great to come across a blog every once in a while
    that isn’t the same old rehashed material. Great read! I’ve saved your site and I’m adding your RSS feeds to my Google account.

    Reply
  3. This is the perfect website for everyone who really wants to find out
    about this topic. You know a whole lot its almost tough to argue with you (not that I actually will need to…HaHa).

    You certainly put a fresh spin on a subject which has been discussed for
    ages. Wonderful stuff, just great!

    Reply
  4. Hello, i believe that i saw you visited my blog so i got here to go back the choose?.I am trying to
    in finding things to improve my website!I assume its good enough to make use of some of your ideas!!

    Reply
  5. Having read this I believed it was rather informative.
    I appreciate you finding the time and energy to put this
    information together. I once again find myself personally spending a significant amount of time both reading and leaving
    comments. But so what, it was still worthwhile!

    Reply
  6. First off I want to say awesome blog! I had a quick question that I’d like to ask if you
    do not mind. I was interested to find out how you center yourself
    and clear your mind before writing. I’ve had a tough time clearing my
    thoughts in getting my thoughts out there.
    I do enjoy writing but it just seems like the first 10 to 15 minutes are lost simply just trying to figure out how
    to begin. Any suggestions or hints? Appreciate it!

    Reply
  7. Can I simply say what a relief to uncover someone who genuinely
    knows what they’re talking about over the internet. You definitely
    understand how to bring a problem to light and make it important.
    More people must check this out and understand this side of your story.
    I was surprised you’re not more popular because you most certainly possess the
    gift.

    Reply
  8. Hey just wanted to give you a quick heads up and let you know
    a few of the images aren’t loading correctly. I’m not sure why but I think its a linking issue.
    I’ve tried it in two different browsers and both
    show the same outcome.

    Reply
  9. Hi there tsrrific blog! Does running a blog like thiss requiree a lott off work?
    I have absolutely nno expertise iin computer programming however I was hoping
    to start myy own blog iin the near future. Anyhow, iff you have
    any recommendations or techniques right sex cams for you new blog
    owners please share. I understand this is off subject however I just
    had to ask. Cheers!

    Reply
  10. Hi, Neat post. There’s a roblem together with your website in web explorer, would
    check this? IE nonetheless is the markettplace chief and
    a large component of other folks ill pass over your magnificent writing because of this problem.

    Feel free to surf to mmy web site adultchatsex.com

    Reply
  11. I’ve been exploring for a bit for any high-quality articles or weblog posts on this kind of house .
    Exploring in Yahoo I eventually stumbled upon this website.
    Reading this information So i am glad to show that I’ve an incredibly
    excellent uncanny feeling I came upon just what I needed. I such
    a lot certainly will make sure to don?t forget this site and give it a look on a constant basis.

    Also visit my website spambot

    Reply

Leave a Comment