未处理的承诺拒绝：NotSupportedError（DOM异常9）：不支持该操作
kgl*_*ing 6 html javascript safari jquery html5
这是我的第一个问题。
所以我有这个github页面，可以在最新的Chrome上正常工作，但是我无法在Safari中使用它。当我单击Safari上的播放按钮时，出现未处理的承诺拒绝：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中使用了。所有这些都能使事情变得如此简单。
我怀疑这条路行不通：req.open('GET', './sounds/' + studentName + '.ogg', true);
在开发人员工具中打开网络选项卡并仔细检查 - 此请求可能失败，或者没有返回您期望的结果。
尝试输入完整路径。
| 归档时间： |
|
| 查看次数： |
2054 次 |
| 最近记录： |