Question

我想要一个带有文本框和旁边按钮的网站，可以连续播放某些mp3文件。

假设我在html文件存储的同一目录中有一堆mp3文件。

如果，在文本框中，我写了'你好那里'，然后我点击它旁边的按钮，程序将查找文件'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>

Answer 1

只有定义一个独特的音频标签，音频文件播放，才能防止多个音频播放暂停难以控制，未读和读取标识，播放当前语音，其他音频停止播放，语音播放完成，自动播放下一个。

＆＃13;

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) {
               
            }
        });
    }        
}

＆＃13;

<!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>

＆＃13;

HTML按钮播放连续的mp3文件

1 个答案: