如何使用php和html中的按钮从数据库播放音频？

Question

i tried to built my website with audio player inside. But i have problem when i combined song that load from database with play button. I want to make my play button change when it clicked and load song from database. I have codes like these :

HTML and PHP

<div id="playbtn">              
   <button id="play_btn" onclick="playPause()"></button>                    
      <?php
          $song= "SELECT mp3Lagu FROM folksong WHERE songtitle = 'Apuse'";
          $result = mysql_query($song);

          while ($row = mysql_fetch_array($result)) { 
              echo'
                 <audio id="listenlagu">
                 <source src="data:audio/mp3;base64,'.base64_encode( $row['mp3Lagu'] ).'">
                 </audio>';
          }
      ?></div>

I used javascript to change the display button like these :

JAVASCRIPT

<script>
var audio, playbtn;
function initAudioPlayer(){
audio = new Audio();
//audio = document.getElementById('listenlagu');
//audio.src = "audio/Apuse.mp3";
audio.src = document.getElementById('listenlagu');  
audio.load();
audio.loop = true;
audio.play();

// Set object references
playbtn = document.getElementById("play_btn");

// Add Event Handling
playbtn.addEventListener("click",playPause);

// Functions
function playPause(){
    if(audio.paused){
        audio.play();
        playbtn.style.background = "url(images/pause70.png) no-repeat";
    } else {
        audio.pause();
        playbtn.style.background = "url(images/play70.png) no-repeat";
    }
}   
}
window.addEventListener("load", initAudioPlayer);
</script>

but it's not working when i combined with javascript -_____-"

Anyone know where the problems are ? Can you help me to fix these ?

Answer 1

You should update the following (full code example below):

1. assign the src attribute to audio.src
2. move your playPause function outside of the initAudioPlayer function
3. make your playPause function accept 2 parameters 1 - "audio" (the new Audio object) and 2 - playbtn (the button element), and have it return a function so that it can be used as a callback in the addEventListenter method

Here is a working plunkr: https://plnkr.co/edit/bticzS?p=preview

    initAudioPlayer();

    function initAudioPlayer(){
      var audio = new Audio();
      var aContainer = document.getElementById('listenlagu');
      // assign the audio src
      audio.src = aContainer.querySelectorAll('source')[0].getAttribute('src');
      audio.load();
      audio.loop = true;
      audio.play();

      // Set object references
      var playbtn = document.getElementById("play_btn");

        // Add Event Handling
        playbtn.addEventListener("click", playPause(audio, playbtn));
      }

      // Functions
      function playPause(audio, playbtn){
          return function () {
             if(audio.paused){
               audio.play();
               playbtn.style.background = "url(images/pause70.png) no-repeat";
             } else {
               audio.pause();
               playbtn.style.background = "url(images/play70.png) no-repeat";
             } 
          }
      }