Three.js: Audio on Safari / IOS not working

Created on 19 Dec 2016 · 13Comments · Source: mrdoob/three.js

var audiolistener = new THREE.AudioListener();
camera.add( me.audiolistener );

var sound = new THREE.Audio( audiolistener );
    var audioLoader = new THREE.AudioLoader();
    audioLoader.load( 'SOMEAUDIO.wav', function( buffer ) {
    sound.setBuffer( buffer );
    sound.setLoop(false);
    sound.setVolume(0.5);
    sound.play();
});

this works on android browsers, and desktop

Source

aryeharmon

Most helpful comment

i just spent a lot of time figuring this out because i want to use positional audio for a web project and finally got it working, so i figured i'd share here since this got me going in the right direction. basically the source comes from the audioListener context.

this is in my init function:

function playSound() {
  audioLoader.load("clips/theme_80.mp3", function(buffer) {
    sound.setBuffer( buffer );
    sound.setRefDistance( 20 );
    sound.play();
  });

  var source = listener.context.createBufferSource();
  source.connect(listener.context.destination);
  source.start();
}
window.addEventListener('touchstart', playSound);
document.addEventListener('click', playSound);

seems to work on mobile safari and chrome, though only tested on my iphone.

here's the test version:
https://owenroberts.github.io/char/sound.html

owenroberts on 14 Dec 2017

👍3

All 13 comments

It will be hard to investigate the issue if you don't provide more information...

Mugen87 on 19 Dec 2016

👍1

@Mugen87 more infomation was added.

aryeharmon on 20 Dec 2016

Can you test with a MP3 file instead? Just to be sure it's not a problem with .wav files...

Mugen87 on 20 Dec 2016

@Mugen87 already tested. does not work.

aryeharmon on 20 Dec 2016

Unfortunately i have no iOS device for testing. Can you check the browser console in Safari? Maybe there are some warnings or errors when you try to play the audio...

Mugen87 on 21 Dec 2016

I suspect @aryeharmon is not aware that on Android and iOS sound doesn't start unless triggered by a user action (ie. clicking a button). We probably should add that to the examples.

mrdoob on 22 Dec 2016

This soved my issue:

window.addEventListener('touchstart', function() {

    // create empty buffer
    var buffer = myContext.createBuffer(1, 1, 22050);
    var source = myContext.createBufferSource();
    source.buffer = buffer;

    // connect to output (your speakers)
    source.connect(myContext.destination);

    // play the file
    source.noteOn(0);

}, false);

Source: https://paulbakaus.com/tutorials/html5/web-audio-on-ios/

aryeharmon on 1 Jan 2017

aryeharmon, could you provide a broader context? I'm not sure what myContext is- is it a ThreeJS audio source?

smellyRose on 9 Aug 2017

this is in my init function:

function playSound() {
  audioLoader.load("clips/theme_80.mp3", function(buffer) {
    sound.setBuffer( buffer );
    sound.setRefDistance( 20 );
    sound.play();
  });

  var source = listener.context.createBufferSource();
  source.connect(listener.context.destination);
  source.start();
}
window.addEventListener('touchstart', playSound);
document.addEventListener('click', playSound);

seems to work on mobile safari and chrome, though only tested on my iphone.

here's the test version:
https://owenroberts.github.io/char/sound.html

owenroberts on 14 Dec 2017

👍3

@owenroberts I've been attempting the same thing, but your example and your code don't seem to get me anywhere with iOS 11 on an iPhone 6s. Any idea if recent mobile safari/chrome updates have broken this?

grlindburg on 6 Jan 2018

@grlindburg oh ok, good to know, i have not updated to iOS 11 yet, have been meaning to do that, i'll test it soon. is your code available online?

owenroberts on 8 Jan 2018

@grlindburg got a chance to test this on iOS 11, and it works, i have an iPhone 6, tried both safari and chrome.

owenroberts on 2 Feb 2018

你的音频播放解决了吗？