Comments (24)
Ogg format is not supported by safari.
from webaudio-examples.
@guest271314 thanks for the valient effort at fixing this, but ... it still doesn't seem to work for me. I also tried moving the audio context creation inside a user gesture, and rewriting the forking code that chooses between AudioContext
and webkitAudioContext
...
...Safari no longer errors. It now just fails silently
¯_(ツ)_/¯
from webaudio-examples.
After playing around with the Web Audio API for a week, I noticed the following policy in Safari: It always wants a user gesture right before you start playback. You can not invoke downloading and playing an audio file at the same time from one button click!
So if you change your code FROM:
play.onclick = function() {
getData();
source.play(0);
TO:
getData();
play.onclick = function() {
source.play(0);
Safari will start playback as intended. Unfortunately though, it will throw an error when you hit the play button a 2nd time. Chrome's console says: "Failed to execute 'start' on 'AudioBufferSourceNode': cannot call start more than once."
from webaudio-examples.
I had similar problem lately that decodeAudioData
failing without much information. After trying lot of things realized,
the fix was actually using .m4a
audio files for iOS safari browsers.
But keep in mind, Firefox and some other Non-Apple platforms won't work with m4a
.
So we first do check to detect iOS safari browser and use m4a
version else use the mp3
everywhere.
from webaudio-examples.
Hrm. I tried changing the parameter to error, which is what it says it is in the spec. But it still doesn't work. This looks like a Safari bug to me - it works fine in other browsers.
from webaudio-examples.
Also, the loop start and end times will not function as expected unless you un-remark the line:
source.loop = true;
which is currently remarked out.
from webaudio-examples.
@jakelewis3d this is a good point; I've fixed that.
from webaudio-examples.
@jakelewis3d does it work on safari with source.loop = true? if Yes, does it mean that percussion sounds cannot be used in safari?
from webaudio-examples.
Does someone fancy updating the example to offer an MP3 format file too? I will get to it eventually, but I'm crushingly busy right now.
from webaudio-examples.
@chrisdavidmills See attached .zip
viper.mp3.zip.
from webaudio-examples.
@chrisdavidmills Do not currently have access to Safari, cannot verify the output. The closest that am able to test the code is Epiphany 3.28.5 where .ogg
is decoded (bvibber/ogv.js#533 (comment)). Reading the code again, source.start(0)
should probably be within decodeAudioData()
callback within getData()
?
Safari does fail or report missing coverage for several Web Audio API methods at https://wpt.fyi/interop/webaudio/the-audio-api/the-audiobuffersourcenode-interface/audiobuffersource-multi-channels.html?label=master&label=experimental&aligned from https://github.com/web-platform-tests/wpt/blob/07d9f452d740d98ded5b11c176ba783fe9d80e5b/webaudio/the-audio-api/the-audiobuffersourcenode-interface/audiobuffersource-multi-channels.html.
from webaudio-examples.
As it is marked as fixed, I tried with the steps above. But it does not work either on Safari 13.9.4
from webaudio-examples.
Have you filed a Safari bug? Have you tried https://github.com/jfrancos/oggdec-wasm as workaround?
from webaudio-examples.
It's 2,5 years later as this problem was reported, and it still does not work on Safari! At least you should make a note in the code that the example is not compatible with Safari.
from webaudio-examples.
It's 2,5 years later as this problem was reported, and it still does not work on Safari! At least you should make a note in the code that the example is not compatible with Safari.
I've added a note to the page. I've tried to debug this a few times now, and never gotten anywhere, which is really frustrating. I just don't have the time to have a proper look at it.
from webaudio-examples.
So I have been researching a bit with the keywords "Web Audio Api Loop Demo" and found actually quite a few examples. Most of them do not work on Safari either (they do not include webkit), BUT there is this one where even 3 loops are going at the same time: https://forestmist.org/share/web-audio-api-demo
Unfortunately, that code is too complex for me to understand, but you might find there the necessary inspiration to improve your solution which is the simple task of looping that most users like me need.
So we know now, that looping and buffering sounds also works in Safari. Maybe the problem lies in the way you load the audio file?
Here are some more working examples and a great article about what has to be done to make the Web Audio API work in Safari: https://jakearchibald.com/2016/sounds-fun/
Another script that just does looping (without selectable start or end looping points) is at https://github.com/veltman/loopify. It works on Safari and other browsers without a glitch and is just a few lines of code, so it should be easy for a pro programmer to find the bug in the decodeAudioData example.
from webaudio-examples.
@thosch6 thanks for that hint. I am still dealing with this problem more than a year later. Did you find out more since then?
In a simple test I could confirm that getting the data using fetch in the same method as decodeAudioData does not work. But how far exactly do these steps have to be separated and what exactly is it about getting the data? Getting the cached file from an indexed DB did not seem to work either
from webaudio-examples.
from webaudio-examples.
Thanks for the tip.
In case this is helpful anyone else in the future: The solution for me was to actually do both the loading and decoding in one function but playing the sound in another function triggered by a separate event.
let audioBuffer;
async function init() {
const audioFile = await fetchSoundArrayBuffer();
audioBuffer = await this.audioContext.decodeAudioData(audioFile);
}
function play() {
const source = this.audioContext.createBufferSource();
source.buffer = audioBuffer;
source.connect(this.audioContext.destination);
source.start();
}
from webaudio-examples.
@shreyas-jadhav Does iOS support MP3?
from webaudio-examples.
according to my tests on our app, iOS 14 fails all the time to decodeAudioData
with .mp3
, while iOS 15 was failing 1/5 times roughly, else it was just working. i know this doesn't sound reasonable as a programmer. but it just worked for us when we switched to .m4a
from webaudio-examples.
Web Audio API specification https://webaudio.github.io/web-audio-api/#dom-baseaudiocontext-decodeaudiodata
Audio file data can be in any of the formats supported by the audio element.
Does Safari play MP3 files at HTML <audio>
element?
from webaudio-examples.
Yes it does support mp3 for audio
element and even for decodeAudioData
.
Actually there might be different reason why it wasn't working for us with mp3.
We had 6 mp3 files each of 10-20 MB. And the crashing happened because we decoded all the files simultaneously. (maybe because some memory issues idk) just now realized conversion to m4a has reduced the size of mp3 files and maybe thats why it isn't happening now.
Seems that only iOS safari goes out of memory or something while decoding simultaneously.
sorry for posting unrelated & vague solution before.
from webaudio-examples.
Thanks all for the input here. It looks like this issue has been fixed by #32 which uses .mp3
instead of .ogg
so I am going to close this one as fixed.
Thank you :)
from webaudio-examples.
Related Issues (20)
- change the output on mobile device HOT 1
- python3 -m http.server returns wrong MIME type for javascript files causing samples not to work HOT 4
- Bug: Step-Sequencer Noise Duration 0 causes uncaught DOM exception HOT 1
- [webaudio-examples] Adding a waveform example HOT 2
- Uncaught (in promise) DOMException: The element has no supported sources. line 101 in index.html in audio-basics. HOT 3
- [step-sequencer] The slider inputs to set the envelope of the "Sweep" sound are not working as expected HOT 3
- [step-sequencer] The slider input to set the DTMF rate is not working as expected HOT 3
- Some directories are missing in README.md HOT 2
- Make headers in README.md consistent HOT 1
- Hyperlink methods and objects in directory descriptions to MDN Web Audio API docs HOT 3
- Multi track example could have mixing capabilities HOT 2
- Visualization for OscillatorNode HOT 1
- empty <!-- --> HTML comments in step-sequencer/index.html
- How to preserve an audio's pitch after changing AudioBufferSourceNode.playbackRate? HOT 1
- media-source-buffer example doesn't work in Safari HOT 2
- createMediaElementSource() requires prior call to getUserMedia() using Safari HOT 1
- Violent Theremin example has .DS_store file
- white noise live demo throws error HOT 3
- The element has no supported sources. HOT 4
- Voice-change-O-matic does not work on Safari iOS HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webaudio-examples.