Having some trouble with my html5 custom audio control

Question

I am dealing with dynamic loaded file from php. My custom audio control can only play the first audio file from the database but cannot play others. I will greatful if anyone can help me.

This is my code:

 echo " <audio id='aud' controls> 
      source='$aud_dir' type='audio/$audio_type'>
      </audio>
     <h4 id='playpausebtn'><span class='glyphicon glyphicon-play'></span>  </h4>";

This is my javascript code:

var aud, playbtn;

function intializeplayer() {
  aud = document.getElementById('aud');
  playbtn = document.getElementById('playpausebtn');

  playbtn.addEventListener('click', playpause, false);
}
window.onload = intializeplayer;

function playpause() {
  if (aud.paused) {
    aud.play();
  } else {
    aud.pause();
  }
}

i am working on project that i want my users to upload mp3 files and i have created a custom audio player but this my custom audio player can only play the last loaded audio file from mysql database.but i want my custom audio player to be able to play all the mp3 files coming from database.i think my problem is in the javascript part — looper, Oct 04 '16 at 02:42
Well, your HTML is invalid... you're ending the opening audio tag early. Also, you're duplicating the ID on the page. Additionally, you need to escape arbitrary data used inn HTML... how you do that depends on whatever language you're using. (If it's PHP, `htmlspecialchars()`.) — Brad, Oct 09 '16 at 05:28
@brad talk about a lot of things .can give tell me what you mean by updating the code? — looper, Oct 18 '16 at 09:10

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

The javascript appears to work ... I altered the html a little - it appears your HTML for the audio tag is invalid - there is a > after controls which closes the opening tag, and then the source and type attributes are floating inside the tag...

See working example below:

Update

Per your comments, you mentioned that you needed to have the Play/Pause button work for multiple audio players. I have updated the sample to handle all audio tags, though you could add a class attribute to specific audio elements and find the desired elements using that class name (e.g. var audioPlayers = $('.selectedAudioPlayers');. And per the html standard (4 I believe) the id attributes must be unique (refer to the MDN documentation and validity rules are explained in this SO answer, so as you are generating the <audio> tags with your server side code (PHP, right?), you can make the id attributes unique by appending an id to it - e.g. echo "<audio id='aud_$id'...". Does that make sense?

    var audPlayers, playbtn;

    function intializeplayer() {
      audPlayers = document.getElementsByTagName('audio');
      playbtn = document.getElementById('playpausebtn');

      playbtn.addEventListener('click', togglePlayers, false);
    }
    window.onload = intializeplayer;
    function togglePlayers() {
        Array.prototype.forEach.call(audPlayers,playpause);
    }

    function playpause(aud) {
      if (aud.paused) {
        aud.play();
      } else {
        aud.pause();
      }
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<audio id='aud_1' controls src="http://www.noiseaddicts.com/samples_1w72b820/3717.mp3">
</audio>
<audio id='aud_2' controls src="http://www.noiseaddicts.com/samples_1w72b820/1456.mp3"> </audio>
<h4 id='playpausebtn'><span class='glyphicon glyphicon-play'></span></h4>

mine is working when i have only one audio file in the page my problem sir is when i load more than one file from the mysql datebase the audio custom play can only play the last uploaded audio file.my question is what i can add to my code to make it play all the audio files regardless the amount of audio files uploaded from the database, am so happy you attend to my question i hope you will help me alitle bit more,so greatful — looper, Oct 09 '16 at 02:51

Having some trouble with my html5 custom audio control

1 Answers1

Update