Question

因此，在我的音频播放器（ka-musicplayer.glitch.me）中，我看到一个缺陷，当我通过键入MP3的路径来播放音频时，它会返回该缺陷。如果我预先定义了MP3，它会起作用。随时查看代码here.

   var input = document.getElementById("input");
      var inputVal = "";
      if (input) {
        inputVal = input.value;
      }

      var player = new Audio(inputVal);
      player.crossOrigin = "anonymous";
  var s2 = document.createElement("button");
      s2.innerText = "Play";
      s2.addEventListener("click", function() {
        player.src = inputVal;
        player.play();
      });
      document.body.appendChild(s2);

<!DOCTYPE html>
<head></head>
<body>


<input id="input" />
Check JS Console in current browser for error

Answer 1

研究了Audio()构造函数之后，我修改了您的代码。

首先，您可以在HTML中编写button元素并添加事件侦听器，而不是动态生成它。

<!DOCTYPE html>
<head></head>
<html>
<body>
    <input id="input" type="text">
    <button id="play">Play</button>
</body>
</html>

此外，至少在您提供的代码段中，您立即获取了输入的值。当您单击播放按钮时，我将获取值：

const input = document.getElementById("input");
const playButton = document.getElementById("play");


playButton.addEventListener("click", function() {
    if (input.value.length) {
        let inputVal = input.value;
        var player = new Audio(inputVal);
        player.crossOrigin = "anonymous";
        player.addEventListener("canplaythrough", function() {
            player.play();
        })
    }
})

请注意播放器上的"canplaythrough"侦听器-这会延迟播放音频，直到音频元素和文件本身已完全加载。您也不需要为元素分配src；传递给Audio()构造函数的URL将自动分配给源。

音频播放器返回Uncaught（承诺）：（DOMException）元素没有受支持的源

1 个答案: