HTML5音频标记停止按钮,停止一个实时MP3流

HTML5 Audio Tag Stop Button, Stop a Live MP3 Stream?

本文关键字:一个 实时 MP3 音频 按钮 HTML5      更新时间:2023-09-26

我想添加一个停止按钮。此刻只有一个播放和暂停按钮,但停止并不是真正的浏览器缓冲音乐,而是没有跳到开头。使用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;
    }
}

如果您只需要一个停止按钮,那么就无法通过javascript API直接控制这样的事情。但你基本上可以通过暂停歌曲并将其设置为从一开始播放来模拟同样的行为(前提是你不想停止缓冲(。类似这样的东西:

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