Question

这是我的第一个问题。

所以我有这个github页面可以很好地使用最新的铬，但我不能让它在safari上工作。当我点击Safari上的播放按钮时，我得到未处理的承诺拒绝：NotSupportedError（DOM例外9）：不支持该操作。

以下是控制台错误的照片

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

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

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

<!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

事实证明，Safari不支持ogg。这就是错误发生的原因。

Answer 2

我怀疑这条道路不起作用：req.open('GET', './sounds/' + studentName + '.ogg', true);

在开发人员工具中打开您的网络标签并仔细检查 - 此请求可能失败，或者没有返回您希望返回的内容。

尝试以完整路径进食。

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

2 个答案: