从相同的音频元素中播放许多音频文件

我正在构建一个网页，以预览歌曲，让观看的公众收听每首歌曲的片段。

我不想做的是通过为许多音频元素创建许多调用来重新发明轮子，您可以看到我如何使用"示例"作为第一个，但我不想一遍又一遍地继续重复代码。p>这是当前工作的方式：

<html>
    <head>
        <style>
            div{
                display: none;
            }
        </style>
    </head>
    <body>
        <div>
            <audio id="sample" src="BACKING unforgettable fire.mp3" controls preload>
                <p>Your browser does not support the audio element</p>
            </audio>
        </div>
        <br>
        <a href="javascript:playSegment(10, 35);">BACKING unforgettable fire - <img src="http://www.auctioneerslive.co.uk/music/play.png"></a>
        <script>
            var audio = document.getElementById('sample');
            var segmentEnd;
            audio.addEventListener('timeupdate', function (){
                if (segmentEnd && audio.currentTime >= segmentEnd){
                    audio.pause();
                }
                console.log(audio.currentTime);
            }, false);
            function playSegment(startTime, endTime){
                segmentEnd = endTime;
                audio.currentTime = startTime;
                audio.play();
            }
        </script>
    </body>
</html>

将mp3文件的URL传递给playSeggent（）在您的 <a>标签中呼叫，例如：

<a href="javascript:playSegment('BACKING unforgettable fire.mp3', 10, 35);">BACKING unforgettable fire - <img src="play.png"></a>

然后修改您的playSeggent（）函数如下：

function playSegment(fileURL, startTime, endTime){
    audio.src = fileURL;
    audio.oncanplay = function(){
            segmentEnd = endTime;
            audio.currentTime = startTime;    
            audio.play();
    };
    audio.load();
}

查看调整但分类，谢谢Ablopez

function playSegment2(fileURL, startTime, endTime)
{
    var audio = document.getElementById('sample');
    var segmentEnd;
    audio.src = fileURL;
    audio.oncanplay = function()
    {
        audio.addEventListener('timeupdate', function ()
        {   
            if (segmentEnd && audio.currentTime >= segmentEnd) 
            {
                audio.pause();
            } 
            console.log(audio.currentTime);
        }, false);
        segmentEnd = endTime;
        audio.currentTime = startTime;    
        audio.play();        
    };
    audio.load();
}

相关内容

最新更新

热门标签：