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

Question

我试图用内置的音频播放器构建我的网站。但是当我将从数据库加载的歌曲与播放按钮组合在一起时，我遇到了问题。我想让我的播放按钮在单击时更改并从数据库加载歌曲。我有这样的代码：

HTML 和 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>

我用 javascript 像这样更改显示按钮：

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>

但是当我结合 javascript -_____-"

时它不起作用

有人知道问题出在哪里吗？你能帮我解决这些问题吗？

Answer 1

您应该更新以下内容（完整代码示例如下）：

将 src 属性分配给 audio.src
将 playPause 函数移到 initAudioPlayer 函数之外
让你的 playPause 函数接受 2 个参数 1 - "audio"（新的 Audio 对象）和 2 - playbtn（按钮元素），并让它 return 成为一个函数，这样它就可以在 addEventListenter 方法中用作回调

这是一个有效的插件：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";
             } 
          }
      }

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

How to play audio from database with button in php and html?

html

javascript

php

audio

html5-audio