javascript - 如何正确使用与加载音频有关的事件

Question

我正在制作一个音频播放器并尝试添加功能，以便当任何音频元素(有多个协调的轨道)没有加载足够的数据来继续播放时，播放按钮变成加载按钮，其他音频元素被暂停，等等等等。然后当音频加载到足以播放时，播放恢复。

对于后一点，显然有两个相关的事件处理程序:canplay和 canplaythrough ，我很清楚它们之间的区别。

然而，对于前一部分，加载，我很困惑我应该为我的功能使用哪个事件。这些似乎都是相关的:

停滞

暂停

等待

W3Schools reference会建议 waiting是我的首选。 (尽管 Mozilla reference 对其有完全不同的描述)。但如果是这种情况，在特定的边缘情况下，我是否还需要使用其他任何一种？如果其中一个发生火灾，是否 waiting也火？

然后还有playing - 我应该在加载事件后使用它来触发恢复音频吗？

也许有人可以提供实现我想要的准系统代码？

编辑

这是一些显示我当前设置的代码。如您所见，我正在押注缓冲完成后可能会触发哪个事件。

// main Player object
function Player() {
    this.playing = false;
    this.waitForLoad = false;

    this.audio = new Audio(filepath);
    this.narration.preload = "auto";
    this.narration.addEventListener('canplaythrough', () => { this.loaded(); });
    this.narration.addEventListener('waiting', () => { this.audioWaiting(); });
    this.narration.addEventListener('playing', () => { this.audioUnwaiting(); });
}

Player.prototype =
{
    play: function() {
        this.playing = true;
        this.narration.play();
        playButton.addClass('pause');
    },

    pause: function() {
        this.playing = false;
        this.narration.pause();
        playButton.removeClass('pause');
    },

    // for onLoaded event
    loaded: function() {
        playButton.removeClass('loading'); // playButton starts off with class="play loading"
        if (this.playing && this.waitForLoad) {
            this.audioUnwaiting();
        }
    },

    // if any element that needs to play now hasn't loaded (or onWaiting events)
    audioWaiting: function() {
        if (!this.waitForLoad) {
            this.waitForLoad = true;
            this.pause();
            playButton.addClass('loading');
        }
    },

    // onPlaying - once an element that needs to play now has loaded
    audioUnwaiting: function() {
        if (this.waitForLoad) {
            this.waitForLoad = false;
            playButton.removeClass('loading');
            if (this.playing) this.play();
        }
    },
};

Answer 1

似乎您可能正在尝试访问项目的某些只读属性。对于像 jquery 这样的库，根据状态更改图标是没有问题的。

我认为“缓冲”是您真正想要的属性:

How do I make a loading bar for an HTML5 audio element?

https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/buffering_seeking_time_ranges

我认为查看已加载多少以及您已经在音频文件中播放了多远应该是足够的信息来更改图标并获得您正在寻找的功能

我想我需要看看你正在构建什么才能真正理解。你有链接之类的吗？