未处理的Promise拒绝：NotSupportedError（DOM异常9）：不支持该操作

Question

这是我的第一个问题。

所以我有这个github页面可以很好地使用最新的铬，但我不能让它在safari上工作。当我单击Safari上的播放按钮时，我得到Unhandled Promise Rejection：NotSupportedError（DOM异常9）：不支持该操作。

这是控制台错误的照片

https://kglearning.github.io/imon/angela.html

基本上，当页面加载时，它将发出xhr请求。加载音频资源文件，以便在按下播放按钮时，用户不必等待声音。它在chrome上工作得很好，理想情况下首先应该有某种加载屏幕，但我还没有那么远，因为这个脚本在Safari 11上失败了.Angela页面是我现在唯一正在处理的页面，直到这个问题是固定的。那么......这里发生了什么？我有点难过。

这是代码，但您应该从链接运行它。

<!doctype html>
<html lang="en">
  <head>
    <title>Imon</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 4 Beta CSS -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
  </head>
  <body>

    <!-- Lazy formatting with Bootstrap 4 Beta.
    Creating a container, jumbotron, and centering -->
    <div class="container">
      <div class="jumbotron">
        <h1 class="text-center">Imon 爱蒙幼儿园</h1>
      </div>

    <!-- Lazy formatting with Bootstrap 4 Beta.
    Students Section -->
        <div class="row text-center">
          <div class="col-sm">
            <h2>Angela</h2>
            <button type="button" id="play" class="btn btn-primary">Play</button>
          </div>

          </div>



          </div>
        </div>

    <!-- javascript after the page loads -->

    <script>
    /*
      This script has been purposly left un-minified, sourced, and
      commented directly on this page. Why? a few reasons... I'm
      not trying to hide my source. At the very least the comments
      are here for educational purposes, but mainly all this was
      done because I'm lazy and didn't want to tab between multiple
      source files. So the JS was lazily left here. Deal with it.
    */

      var getPageName = window.location.pathname.substring(window.location.pathname.lastIndexOf('/') + 1);
      var studentName = getPageName.substr(0, getPageName.length - 5);


      function createPlayButton(audioObject) {
          var playButton = document.getElementById("play");
          playButton.addEventListener("click", function() {
                                      audioObject.play();
                                    }, false );

      }

      function playAudio(audioObject2) {
        audioObject2.play();
      }
      /*
         This approach was chosen since service workers are still
         a little too new for production environments, and I don't
         like application cache which is all but removed from
         modern browsers.
      */
      var req = new XMLHttpRequest();
      req.open('GET', './sounds/' + studentName + '.ogg', true);
      req.responseType = 'blob';

      req.onload = function() {
        if (this.status === 200) {
            var audio = new Audio(URL.createObjectURL(this.response));
            audio.load();
            createPlayButton(audio);
         }
      }
      req.onerror = function() {

      }

      req.send();
    </script>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="./js/jquery-3.2.1.slim.min.js"</script>
    <script src="./js/popper.min.js"</script>
    <script src="./js/bootstrap.min.js"</script>
  </body>
</html>

编辑

我换了

var audio = new Audio(URL.createObjectURL(this.response));

至

//var audio = new Audio(URL.createObjectURL(this.response));
req.open('GET', './sounds/angela.ogg', true);

这个问题在Safari中仍然存在

为了更进一步，我现在已将req.open更改为

req.open('GET', 'https://kglearning.github.io/imon/sounds/angela.ogg', true);

这仍然无法解决问题。再次请检查上面的github页面链接。

编辑：在尝试了这么多不同的事情后，我决定四处寻求帮助我的剧本，最后被告知我忽略了最简单的事情......

SAFARI不支持OGG！

所以我将文件类型从ogg更改为m4a，现在它在Safari中工作。这一切都非常简单。

Answer 1

另一答案