HTML按鈕播放連續的MP3文件

-1

我想要一個帶有文本框和按鈕旁邊的按鈕的網站，可以背對背地播放某些mp3文件。HTML按鈕播放連續的MP3文件

假設我有一堆mp3文件與html文件存儲在同一目錄中。

如果在文本框中我寫了'hello there'，我點擊了它旁邊的按鈕，程序會查找文件'hello.mp3'和'there.mp3'，網站會播放這兩個文件背靠背。

在這一點上，我並不關心程序如何分割輸入中的單詞以查找帶有這些分隔的單詞的文件，但我更關心如何將兩個音頻文件播放回回到HTML。

例如：

<!DOCTYPE html> 
<html> 
    <head> 
     <title> Play Sound from Text Input </title> 
     <script> 
      function play(){ 
       <audio> 
        <source src='hello.mp3'> 
        <source src='there.mp3'> 
       </audio> 
          } 
     </script> 
    </head> 

    <body> 
     <input type='text'> 
     <input type="button" value="PLAY" onclick="play()"> 
    </body> 
</html>

來源

2017-06-14 user604803

您可以發佈您的代碼？你試過什麼了？ – styfle

@styfle承認，完成 – user604803

只有一個獨特的音頻標籤的定義，音頻文件播放，可預防多種音頻播放暫停難以控制，未讀，讀的標誌，播放當前的聲音，其他音頻停止播放，語音播放完成，然後自動播放。

var that, myI, myAudio = $('#audioPlayer'), otherAudio,msgid_client=0,nextAll,audioPath,audio; 
 

 
this.$docChat.on('click', '.js-item .js-box-audio',function(){ 
 
    audioPlayer(this); 
 
}); 
 
function audioPlayer(that){ 
 
    that = that, 
 
    myI = $(that).children('.js-i'), 
 
    audioPath = myI.attr('data-src'); 
 

 
    $(that).parents('.js-item').siblings('.js-item').each(function() { 
 
     $(this).find('.js-i').removeClass('active loading'); 
 
    }); 
 

 
    if (myI.hasClass('active')) { 
 
     myI.removeClass('active'); 
 
     myAudio[0].pause(); 
 
    } else { 
 
     myI.addClass('loading'); 
 
     myAudio[0].src = audioPath; 
 
     myAudio[0].preload="auto"; 
 
     myAudio[0].load(); 
 
    　　 
 
     myAudio.off('loadedmetadata').on("loadedmetadata",function() { 
 
      myI.removeClass('loading').addClass('active'); 
 
      myAudio[0].play(); 
 
     }); 
 
    } 
 

 
    myAudio.off('ended').on("ended",function() { 
 
     myI.removeClass('active'); 
 
     console.log('end'); 
 

 
     nextAll = $(that).parents('.js-item').nextAll(); 
 
     //console.log(nextAll); 
 
     if(nextAll.length){ 
 
      nextAll.each(function(i,n){ 
 
       console.log(i); 
 
       var obj = $(n); 
 
       if(obj.find('.js-box-audio').length){       
 
        obj.find('.js-box-audio').trigger('click',function(){ 
 
         audioPlayer(this);                
 
        }); 
 
        return false;        
 
       } 
 
      }) 
 
     }   
 
    }) 
 

 
    if($(that).hasClass('active')){ 
 
     $.ajax({ 
 
      success: function (res) { 
 
       
 
      } 
 
     }); 
 
    }   
 
}

<!DOCTYPE HTML> 
 
<html> 
 
<body> 
 
    <audio src="/1.aac"></audio> 
 
    <div class="mt20 item item-you w-100 clearfix js-item" data-id="f40a0d57-024d-4f56-b849-705e92a62eb9"> 
 
    <img class="headImg fl" src="./avatar_0.jpg"> 
 
    <div class="msg ml15 fl"> 
 
     <div class="name cl707070"> 
 
      李四 
 
     </div> 
 
     <div class="box box-audio bg-clfff cl333 mt10 inblo relative js-box-audio"> 
 
      <i class="audio-i inblo js-i active" data-src="./1.aac"> 
 
      </i> 
 
      <div style="width: 5px;max-width:3.733333rem;" class="inblo"> 
 
      </div> 
 
      <div class="msgTime cl9b9b9b absolute"> 
 
       2" 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

來源

2017-06-14 02:29:12 yang

我在哪裏插入我想播放的音頻文件？ – user604803

替換音頻標籤的src數量 – yang

HTML按鈕播放連續的MP3文件

回答

相關問題