Question

现在我有一个动态的音频文件列表，我可以播放并按照我的要求暂停它们，但是每个音频文件都有一个特定的开始和停止时间，我希望它们只能播放直到。

这只是遍历我的每个播放按钮，将playAudio函数分配给click事件

var playBtns = document.getElementsByClassName("playBtn");

for (var i = 0; i < playBtns.length; i++){
    var audio = document.getElementById("audio" + playBtns[i].id);

    playBtns[i].onclick = function(){
        playAudio(this.id);
    }
}

因此，我可以播放音频，暂停和播放其他音频，它会暂停正在播放的任何其他音频并将其重新置于其开始位置。

function playAudio(id){
    var audio = document.getElementById("audio" + id);
    var playbtn = document.getElementById(id);
    var sounds = document.getElementsByTagName("audio");
    var playBtns = document.getElementsByClassName("playBtn");

    if(audio.paused){
        for(i = 0; i < sounds.length; i++){ 
            if("audio" + id != sounds[i].id){
                var start = convertToSeconds(sounds[i].dataset.start);
                sounds[i].currentTime = start;
                sounds[i].pause(); 
            }
        }

        for(i = 0; i < playBtns.length; i++){
            playBtns[i].innerHTML = "<img src=\"/images/play_button.png\">";
        }

        audio.play();
        playbtn.innerHTML = "<img src=\"/images/pause_button.png\">";

    } else {

        audio.pause();
        playbtn.innerHTML = "<img src=\"/images/play_button.png\">";

    }
}

我做了一个功能，如果它到达停止时间就停止音频

function stopAudio(startTime, stopTime){
        var newTime = convertToSeconds(stopTime);
        console.log(audio.currentTime);
        if(audio.currentTime >= stopTime){
            audio.pause();
            audio.currentTime = startTime;
        }
}

如果我添加到我的playBtn循环中的stopAudio函数它只适用于最新的音频文件，任何以前的音频文件只会在整个持续时间内播放

for (var i = 0; i < playBtns.length; i++){
    var audio = document.getElementById("audio" + playBtns[i].id);
    var sounds = document.getElementsByTagName("audio");
    var start = convertToSeconds(sounds[i].dataset.start);
    var stop = convertToSeconds(sounds[i].dataset.stop);

    audio.ontimeupdate = function(){ stopAudio(start, stop) };

    playBtns[i].onclick = function(){
        playAudio(this.id);
    }
}

非常感谢任何有关解决此问题的帮助。谢谢你的任何建议。

根据开始和停止时间启动和停止音频src的动态网格？

0 个答案: