HTML連続したmp3ファイルを再生するボタン

-1

テキストボックスとその隣にあるボタンを使用して、特定のmp3ファイルを連続して再生するWebサイトが必要です。HTML連続したmp3ファイルを再生するボタン

私は、htmlファイルが保存されているのと同じディレクトリにmp3ファイルがたくさんあるとします。

テキストボックスに「hello there」と書いて、その横にあるボタンをクリックすると、プログラムは「hello.mp3」と「there.mp3」というファイルを探し、Webサイトが再生します2つのファイルを連続して返します。

私はこの時点で、プログラムが入力内の単語を分割して、それらの単語でファイルを探す方法については心配していませんが、2つのオーディオファイルを再生する方法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ファイルを再生するボタン

答えて

関連する問題