goldfire / howler.js

Javascript audio library for the modern web.
https://howlerjs.com
MIT License
24.04k stars 2.24k forks source link

playing sound on iOS iphone #364

Closed javismiles closed 9 years ago

javismiles commented 9 years ago

I love this library and it works great for me on Android and Desktop. But on iOS iphone nothing sounds. I read that the issue should be that on iOS you need to first activate a sound on user input, and i tried it

window.addEventListener('touchstart', function() { iOSsound.play(); }, false);

but nothing, i just cant make a single sound come out on iphone,

any clues? thank you

javismiles commented 9 years ago

i used this to make it work now on iphone, apparently iOS9 broke things and now touchend is necessary, but i still need to play a sound, is there a way to do this more invisibly?

  var sound = new Howl({
  urls: ["space9.mp3"],
  volume: 1,
  buffer: false,
  onend: function() {console.log ("finished");},
  onplay: function() {console.log ("Playing");},
  onload: function() {console.log ("loaded");$("#back").text("READY");}
});

window.addEventListener('touchend', function() { console.log("touchend"); sound.play(); $("#back").css("background-color","#27B853");

}, false);

window.addEventListener('mousedown', function() { console.log("mousedown"); sound.play(); $("#back").css("background-color","#27B853"); }, false);

fiso commented 9 years ago

Try executing this in a touchevent handler:

var unlockIOSAudioPlayback = function () {
    var context = Howler.ctx;
    var oscillator = context.createOscillator();
    oscillator.frequency.value = 200;
    oscillator.connect(context.destination);
    oscillator.start(0);
    oscillator.stop(0);
};

That did the trick for me.

javismiles commented 9 years ago

Thank you dear Fiso, i will try it

goldfire commented 9 years ago

Look at https://github.com/goldfire/howler.js/blob/master/howler.js#L155.

javismiles commented 9 years ago

James, that's great except that it doesnt work, at least not with me, to make it work i had to manually add the suggestion of Filip

function unlockIOSAudioPlayback() { var context = Howler.ctx; var oscillator = context.createOscillator(); oscillator.frequency.value = 200; oscillator.connect(context.destination); oscillator.start(0); oscillator.stop(0); }

attached to a touchend event, and that worked great, but the code embedded in the library doesnt work for me

best

Javier ideami Ideami Studios San Francisco / Barcelona +1 408 634 9071 http://torchprinciple.com http://ideami.com http://posterini.com http://incredivid.com http://torchprinciple.com

On Thu, Oct 15, 2015 at 6:48 AM, James Simpson notifications@github.com wrote:

Look at https://github.com/goldfire/howler.js/blob/master/howler.js#L155.

— Reply to this email directly or view it on GitHub https://github.com/goldfire/howler.js/issues/364#issuecomment-148392174.

fiso commented 9 years ago

Yeah I was unsuccessful in making Howler enable audio playback on iOS too, that's how I came up with the workaround.

javismiles commented 9 years ago

thank you for the comment Filip, which is odd , looking at the code it kind of should work but it doesnt , thank you so much for your contribution

Javier ideami Ideami Studios San Francisco / Barcelona +1 408 634 9071 http://torchprinciple.com http://ideami.com http://posterini.com http://incredivid.com http://torchprinciple.com

On Thu, Oct 15, 2015 at 7:14 AM, Filip Söderholm notifications@github.com wrote:

Yeah I was unsuccessful in making Howler enable audio playback on iOS too, that's how I came up with the workaround.

— Reply to this email directly or view it on GitHub https://github.com/goldfire/howler.js/issues/364#issuecomment-148398524.