Question

我想添加一个停止按钮。此刻只有一个播放和暂停按钮，但停止不是真正的浏览器缓冲音乐，而是不跳到开头。使用MP3文件也许可以，但不是在直播中。有人能帮我吗？谢谢。

var pause = new Image();
pause.src = "pause.png";

var play_control = 0;
function playmusic() {
    if (play_control == 0) {
        document.getElementById('musikplayer').play();
        document.getElementById('playbutt').src = 'pause.png';
        play_control = 1;
        window.setTimeout("playcontrol()", 0); 
        window.setTimeout("zeitanzeige()", 0);
    } else {
        document.getElementById('musikplayer').pause();
        document.getElementById('playbutt').src = 'play.png';
        play_control = 0;
    }
}
function playcontrol() {
    if(play_control == 1) {
        if(
            document.getElementById('musikplayer').currentTime 
            == document.getElementById('musikplayer').duration
        ) {
            document.getElementById('playbutt').src = 'play.png';
            play_control = 0;
        } else {
            window.setTimeout("playcontrol()",0); 
        }
    }
}
function zeitanzeige() {
    if(play_control == 1) {
        var full = document.getElementById('musikplayer').duration;
        var full_min = Math.floor(full / 60);
        var full_sec = Math.floor(full - (full_min * 60));

        if(full_min < 10) {
            full_min = '0' + full_min;
        }
        if(full_sec < 10) {
            full_sec = '0' + full_sec;
        }

        var curr = document.getElementById('musikplayer').currentTime;
        var curr_min = Math.floor(curr / 60);
        var curr_sec = Math.floor(curr - (curr_min * 60));

        if(curr_min < 10) {
            curr_min = '0' + curr_min;
        }
        if(curr_sec < 10) {
            curr_sec = '0' + curr_sec;
        }

        document.getElementById('time').innerHTML = "" + curr_min + ":" 
                                                       + curr_sec + "";

        window.setTimeout("zeitanzeige()",0);
    } else {
        document.getElementById('time').innerHTML = "00:00";
    }
}
function vol(z) {
    switch(z) {
        case "1":
            document.getElementById('musikplayer').volume = 0.2;
            document.getElementById('vol1').style.background = '#c9c3c3';
            document.getElementById('vol2').style.background = '#8d8585';
            document.getElementById('vol3').style.background = '#8d8585';
            document.getElementById('vol4').style.background = '#8d8585';
            document.getElementById('vol5').style.background = '#8d8585';
            break;
        case "2":
            document.getElementById('musikplayer').volume = 0.4;    
            document.getElementById('vol1').style.background = '#c9c3c3';
            document.getElementById('vol2').style.background = '#c9c3c3';
            document.getElementById('vol3').style.background = '#8d8585';
            document.getElementById('vol4').style.background = '#8d8585';
            document.getElementById('vol5').style.background = '#8d8585';
            break;
        case "3":
            document.getElementById('musikplayer').volume = 0.6;
            document.getElementById('vol1').style.background = '#c9c3c3';
            document.getElementById('vol2').style.background = '#c9c3c3';
            document.getElementById('vol3').style.background = '#c9c3c3';
            document.getElementById('vol4').style.background = '#8d8585';
            document.getElementById('vol5').style.background = '#8d8585';
            break;
        case "4":
            document.getElementById('musikplayer').volume = 0.8;    
            document.getElementById('vol1').style.background = '#c9c3c3';
            document.getElementById('vol2').style.background = '#c9c3c3';
            document.getElementById('vol3').style.background = '#c9c3c3';
            document.getElementById('vol4').style.background = '#c9c3c3';
            document.getElementById('vol5').style.background = '#8d8585';
            break;
        case "5":
            document.getElementById('musikplayer').volume = 1.0;    
            document.getElementById('vol1').style.background = '#c9c3c3';
            document.getElementById('vol2').style.background = '#c9c3c3';
            document.getElementById('vol3').style.background = '#c9c3c3';
            document.getElementById('vol4').style.background = '#c9c3c3';
            document.getElementById('vol5').style.background = '#c9c3c3';
            break;
    }
}

Answer 1

如果您只需要一个停止按钮，则无法通过javascript API直接控制此类内容。但是你可以通过暂停歌曲并将其设置为从头开始播放来基本模拟相同的行为（假设您不想停止缓冲）。像这样：

var stop = function(stopButtonAudio) {
   stopButtonAudio.pause();
   stopButtonAudio.currentTime=0;
}

HTML5音频标签停止按钮，停止直播MP3流？

1 个答案: