Javascript 音频不停止并同时播放多个曲目

Question

Javascript 音频不停止并同时播放多个曲目。

我正在尝试随机播放 MP3/WAV 首曲目，它一直很好地工作，直到它应该停止最后一首曲目，所以在之前的曲目之间有一个实时合并，这显然听起来像一团糟

我敢打赌这是解决该问题的一个小调整，但是...:)

无论如何这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>&nbsp;</title>
</head>
<body>

在此先感谢您的帮助 :D

var t=setInterval(function(){myTimer()},3000);

var files=
[
    'Hezi-Gangina#1.mp3',
    'Hezi-Gangina#2.mp3',
    'Hezi-Gangina#3.mp3',
    'Hezi-Gangina#4.mp3'
];

function myTimer()
{

    if(audio)
    {
        audio.pause();
        audio.currentTime=0;
        delete audio;
    }

    var i=Math.floor(Math.random()*files.length);
    var url=files[i];

    var audio=new Audio(url);

    audio.play();

    document.title=url.replace(/\.[^/.]+$/,'');

}

</script>

</body>
</html>

Answer 1

问题是区间的回调函数myTimer()。

一起来看看：

if(audio)
{
    audio.pause();
    audio.currentTime=0;
    delete audio;
}

上面，您正在检查变量 audio 是否存在，但这种情况永远不会成立。为什么？它是在之后这个检查和定义的，它是在回调函数的本地范围内定义的：

var audio=new Audio(url);
audio.play();

所以局部变量将在每次调用 myTimer 时重新定义，并且只是 'lives' 在此函数内。

要解决此问题，您需要将音频设为 全局变量 并将 if 检查修改为如下所示：

if(audio != null)

这将确保它不会在第一次尝试停止音频。

这是您修改后的代码：

var audio=null;
var t=setInterval(function(){myTimer()},3000);
var files=
[
    'Hezi-Gangina#1.mp3',
    'Hezi-Gangina#2.mp3',
    'Hezi-Gangina#3.mp3',
    'Hezi-Gangina#4.mp3'
];

function myTimer()
{
    if(audio != null)
    {
        audio.pause();
        audio.currentTime=0;
        delete audio;
    }

    var i=Math.floor(Math.random()*files.length);
    var url=files[i];

    audio=new Audio(url);
    audio.play();
}

Javascript 音频不停止并同时播放多个曲目

Javascript audio does not stop and play multiple tracks simultaniously

html

javascript

audio

mp3

function