Menu
This is my first question here.
So I have this github page that works just fine with the newest chromium, but I can't get it to work on safari. When I click the play button on Safari I get Unhandled Promise Rejection: NotSupportedError (DOM Exception 9): The operation is not supported.
Here is a photo of the error from the console
https://kglearning.github.io/imon/angela.html
Basically when the page loads it will make an xhr request. Load the audio resource file so that when the play button is pushed the user doesn't have to wait for the sound. It works fine on chrome, and ideally there should be some kind of loading screen first, but I haven't gotten that far yet since this script is failing on Safari 11. The Angela page is the only page I'm working on now until this issue is fixed. So... What's going on here? I'm a little stumped.
Here's the code, but you should run it from the link.
<!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>
Edit
I switched
var audio = new Audio(URL.createObjectURL(this.response));
to
//var audio = new Audio(URL.createObjectURL(this.response));
req.open('GET', './sounds/angela.ogg', true);
The problem still persists in Safari
to go even further I have now changed the req.open to
req.open('GET', 'https://kglearning.github.io/imon/sounds/angela.ogg', true);
This still didn't fix the issue. Again please check the github pages link above.
Edit: After trying so many different things I decided to ask around for help with my script, and finally was told the simplest thing that I overlooked...
SAFARI DOESN'T SUPPORT OGG!
So I changed the filetype from ogg to m4a, and now it's working in Safari. All that work for something so simple.
738
AS it turns out Safari doesn't support ogg. That is why the error happened.
146
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
