search

aframevr / aframe

:a: Web framework for building virtual reality experiences.
https://aframe.io/
MIT License
16.58k stars 3.93k forks source link

Enable autoplay of sounds for iOS and Chrome for Android #1463

Open cvan opened 8 years ago

cvan commented 8 years ago

On a user gesture, explicitly play sounds that have autoplay. (Born out of #316.)

Firefox for Android (and soon for iOS) enables autoplay playback by default! woo! 🎈

rafaeleyng commented 8 years ago

I don't know whether I fully understand the problem here, but in my Chrome for Android the sound autoplay just works. In iOS, it doesn't.

In Firefox for Android, though, I can't even open the initial screen of my app without crashing the browser.

Am I missing something?

cvan commented 8 years ago

Whoa, that's a different issue. Does the scene load okay on desktop?

rafaeleyng commented 8 years ago

Yes. Actually I've now finished my project, and probably won't be using a-frame again in the next weeks. But in the end, I just couldn't make audio play at all on iOS, on both Chrome and Safari, even on user events like mouseenter (with fuse cursor) and even with click. It did work on Android and desktop, though.

JstnEdr commented 7 years ago

Is there a solution to getting audio to play in iOS browsers? Audio is working on desktop and Android devices. I saw a similar issue posted here: https://stackoverflow.com/questions/38645716/cant-play-sound-on-ios

MeditationMatt commented 7 years ago

I too would lovvvve a solution to this. Any help out there?

donmccurdy commented 7 years ago

We ought to create an FAQ entry about this, as the question does come up a lot... There is really no way to start an audio clip on iOS without a user interaction. If you want ambient noise or music in the background, you could have a "Begin" button overlaying your screen, prompt users to click that before they enter VR, and kick off VR mode and the audio at the same time.

For sound that would play at arbitrary times, I haven't seen a working example yet. Presumably you would need to put all your sounds into a single file, start that at the beginning, and skip around in the file as needed to play specific effects. This is a pretty painful solution. :/

But in the end, I just couldn't make audio play at all on iOS, on both Chrome and Safari, even on user events like mouseenter (with fuse cursor) and even with click.

A couple notes here:

1) Chrome and Safari on iOS are effectively the same thing; Firefox might work, per @cvan's comment a year ago? 2) mousenter and click events generated by the fuse cursor are not user interaction from the browser's perspective... those are still events generated by the scene's cursor component. You would need the user to press the screen, physically, to generate supported user interaction.

A few more resources:

dirkk0 commented 7 years ago

https://howlerjs.com has Audio Sprites which is pretty much 'skipping around in one file' as far as I understood it, so implementing this might not be as painful. I think one member of the A-Frame community (jostrem) successfully implemented Howler with iOS. If you search for Howler in Slack, you'll find it.

MeditationMatt commented 7 years ago

i am trying to trigger sounds from within an aframe scene interaction, but it won't work on ios.

Everything says you need a user interaction on ios to play audio, but i can't find a working example of that.

UXVirtual commented 7 years ago

We've had really good results using howlerjs for some production projects and games. It'd be great to see someone write a component that extends the standard sound component to add audio sprite support using howlerjs.

donmccurdy commented 7 years ago

Everything says you need a user interaction on ios to play audio, but i can't find a working example of that.

The problem is that interaction within an A-Frame scene doesn't count. The browser can't tell what's going on inside WebGL, so it has to assume those events are just generated by arbitrary JS. You need an old-fashioned physical touchstart or click event, triggered by the user's finger (or Cardboard button) and not by a fuse or gaze cursor. Gamepad buttons might also count. I don't know of a live example of this though.

It'd be great to see someone write a component that extends the standard sound component to add audio sprite support using howlerjs.

+1, this sounds like great idea. It would be nice to see this prototyped as a separate component (sound-sprite?) and added to the registry, where multiple instances of the component can share a single audio file.

dirkk0 commented 7 years ago

I created a prototype, which is working on my 3rd generation iPad. I'd appreciate if someone with a newer iPhone or iPad could confirm that it works for them. http://curious-electric.com/aframe/audiosprite/

On Tue, Jun 13, 2017 at 4:42 PM Don McCurdy notifications@github.com wrote:

Everything says you need a user interaction on ios to play audio, but i can't find a working example of that.

The problem is that interaction within an A-Frame scene doesn't count. The browser can't tell what's going on inside WebGL, so it has to assume those events are just generated by arbitrary JS. You need an old-fashioned physical touchstart or click event, triggered by the user's finger (or Cardboard button) and not by a fuse or gaze cursor. Gamepad buttons might also count. I don't know of a live example of this though.

It'd be great to see someone write a component that extends the standard sound component to add audio sprite support using howlerjs.

+1, this sounds like great idea. It would be nice to see this prototyped as a separate component (sound-sprite?) and added to the registry, where multiple instances of the component can share a single audio file.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/aframevr/aframe/issues/1463#issuecomment-308138947, or mute the thread https://github.com/notifications/unsubscribe-auth/AAmK8tFVZmn5ruzx3AfO5kZLfRkfUGIdks5sDp_JgaJpZM4Iec8O .

MeditationMatt commented 7 years ago

Tested on my iphone 6 and i did not hear any audio after clicking the button.

Thanks for trying to get this to work! I will use it on my live site if we get it working at all.

dirkk0 commented 7 years ago

It worked for someone in the Slack community ... did you look ('gaze') at the cubes?

UXVirtual commented 7 years ago

This works on my iPhone 6 Plus by gazing at the cubes. I had to make sure I turned the silent lock switch off on the device otherwise sound wouldn't play (expected behaviour).

MeditationMatt commented 7 years ago

ha...i didnt realize i needed to gaze at the cubes...nor turn off the silent lock switch. Did both of those and it works! cool.

MeditationMatt commented 7 years ago

would this work with a large audio file?

dirkk0 commented 7 years ago

I guess so, didn't try it out yet. How large is large?

On Fri, Jun 16, 2017 at 7:11 PM MeditationMatt notifications@github.com wrote:

would this work with a large audio file?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/aframevr/aframe/issues/1463#issuecomment-309081998, or mute the thread https://github.com/notifications/unsubscribe-auth/AAmK8mrAqty1MVX6rpn0EUSE6PjpC2RPks5sErcjgaJpZM4Iec8O .