检测WebAudio声音结束

时间:2019-03-23 14:19:57

标签: javascript web-audio web-audio-api

我正在使用JavaScript构建收音机,并尝试为它提供不同的功能,但我需要能够检测到歌曲的结尾以使其正常运行。有什么办法吗?

我尝试了在网上找到的其他方法,例如.ended等,但我认为如果不使用html音频标签,这些方法就不会起作用。因此,我尝试制作一个音频标签,该标签使用与我的js无线电使用的源相同的数据,并获取文件长度以在结束时停止我的sourceNode并制作一个新标签,但是我一直得到null作为数据返回,因此那也不行。

我想做类似的事情:

 context.onended = function() {
    $.ajax({
        url: '../scripts/radio.php',
        data: {
          attr1: 'value1'
        },
        success: function(data) {
        console.log(data);

        fileChosen = true;
        setupAudioNodes();

        var request = new XMLHttpRequest();

        request.addEventListener("progress", updateProgress);
        request.addEventListener("load", transferComplete);
        request.addEventListener("error", transferFailed);
        request.addEventListener("abort", transferCanceled);

        request.open('GET', data, true);
        request.responseType = 'arraybuffer';

        // When loaded decode the data
        request.onload = function() {

            $("#title").html("Title");
            $("#album").html("Goes");
            $("#artist").html("Here");
            onWindowResize();
            $("#title, #artist, #album").css("visibility", "visible");

            // decode the data
            context.decodeAudioData(request.response, function(buffer) {
            // when the audio is decoded play the sound
            sourceNode.buffer = buffer;
            sourceNode.start(0);

            $("#freq, body").addClass("animateHue");
            //on error
            }, function(e) {
                console.log(e);
            });
        };
        request.send();

    }
    });

我希望它在歌曲结尾处播放并播放下一个文件。如果我能知道当前正在播放的歌曲的结束时间,那该怎么办?

1 个答案:

答案 0 :(得分:0)

为解决上述问题,我在设置源的函数内部添加了.ended事件:

function setupAudioNodes() {
    // setup a analyser
    analyser = context.createAnalyser();
    // create a buffer source node
    sourceNode = context.createBufferSource();  
    //connect source to analyser as link
    sourceNode.connect(analyser);
    // and connect source to destination
    sourceNode.connect(context.destination);
    //start updating
    rafID = window.requestAnimationFrame(updateVisualization);
    //I had to place a function for the .ended event inside the function sourceNode was set up.
    sourceNode.onended = function() {
        sourceNode.stop(0);
        playFirst();
}
}