javascript - 仅在音频链接正常工作时才从播放更改为暂停

Question

如果该值是不正确的流链接，则“播放”按钮仍将变为“暂停”。

这就是我试图防止发生的事情。

如果音频不起作用，则按“设置”不会导致“播放”按钮从“播放”变为“暂停”。

代码:
https://jsfiddle.net/vhgL96se/124/

Image

(function iife() {
    "use strict";
    const player = document.getElementById("player");
    const button = document.getElementById("button");
    const value = document.getElementById("input");
    const sent = document.getElementById("sent");
    const input = document.getElementById("clear");
    let canPlay = false;

    function playPauseIcon(play) {
        if (!canPlay) {
            return;
        }
        if (play) {
            button.classList.add("is-playing");
        } else {
            button.classList.remove("is-playing");
        }
    }
    button.addEventListener("click", function () {
        if (!canPlay) {
            return;
        }
        if (player.paused) {
            player.play();
            playPauseIcon(true);
        } else {
            player.pause();
            playPauseIcon(false);
        }
    });
    button.addEventListener("mousedown", function (evt) {
        if (evt.detail > 1) {
            evt.preventDefault();
        }
    }, false);
    sent.addEventListener("click", function () {
        player.src = value.value;
        player.volume = 1.0;
        playPauseIcon(true);
    });
    input.addEventListener("click", function () {
        value.value = "";
        button.classList.remove("is-playing");
        player.pause();
        canPlay = false;
    }, false);
    player.onloadstart = function () {
        if (value.value !== "") {
            canPlay = true;
            playPauseIcon(true);
        }
    };
}());

Answer 1

应该将其更改为oncanplay，然后按其应有的方式工作。

播放按钮从播放更改为暂停

http://hi5.1980s.fm/;

播放按钮不会从播放更改为暂停
当流无效时。

h://hi5.1980s.fm/;

https://jsfiddle.net/vhgL96se/132/

player.oncanplay = function () {
    if (value.value !== "") {
        canPlay = true;
        playPauseIcon(true);
    }
};