Auto play next track on mobile

[psntr]

Have anyone manage to make a playlist play the next track on mobile IOS? I tried the demo version on mobile safari, the next track doesn't start unless I click again on 'Play'.

[aareeph]

iOS requires a user interaction before playing any audio. So you are able to play first sound. However for subsequent audios the user interaction part is missing.

I achieved this by creating a new Howl instance and playing a silent audio file on loop with html5: true flag so the audio context is created. Then I am able to play audios in sequence with another Howl instance.

[psntr]

I see, that's a pity that it requires a new instance on every new track. Updating dynamically the source didn't work for me. So I ended up using the native audio tag.

But thank you for your answer, hope it will help in the future.

[aareeph]

Maybe this post will he helpful to you for dynamically changing src.

#825

[psntr]

Thank you @aareeph, I saw that post too, but couldn't implement it as I wanted. Furthermore, that solution might also ended up generating new instance of howl. What I did was creating an array of track and change it when the previous one ended with the native audio.

[aareeph]

@psntr could you please show me the part of your code where you are using array of track and changing it on audio end? I am also trying to implement similar functionality.

Thanks!

[psntr]

I found the solution from there: #728
And it provided a working solution: https://jsfiddle.net/bbrooks/pk9h3j2x/

[aareeph]

@psntr thanks for sharing. I tried this solution and it's working fine when Safari browser is visible. However if I switch to different app or lock the device then the next audio in sequence doesn't play. Are you experiencing the same?

[psntr]

I never tried on locked phone. But just did and now I'm facing the same issue. While searching for an answer I couldn't find any.

Something interesting, SoundCloud for instance (not the App) but the current mobile website does play the 'next' track while your phone is on "lock screen" mode. Not sure how they do it. Since it works only if you are not playing a playlist in SoundCloud.

[aareeph]

@psntr I tried SoundCloud on iOS 12 and it's not playing next track on lock screen.

Also I checked the http://tonangeber.ch/ and it seems to have a long audio and it seems to be a single long audio file that is being played.

Quest is on! :)

[psntr]

@aareeph yeah I notice with tonangeber.ch later on. So I deleted my previous comment. Sorry about the confusion.

Nevertheless, back to SoundClound. Did you play a track inside a playlist? If yes, then it doesn't work. You should just pick a random track in the homepage, once it ends, it will pick the next one automatically even if you screen is locked.

I also found that website using SoundCloud API:
http://bangers.no

Sadly SoundCloud doesn't creation of new App for any API request at the moment.

[aareeph]

@psntr yes I played a random song and lock the device but for me it isn't playing the next audio. The progress bar completes and pause button changes to play button but it's not starting next sound. Which iOS version you are testing with?

Thanks for sharing link of SoundCloud API. Too bad they aren't offering new apps at the moment :(

[psntr]

I just tried again for the soundclound, it does automatically load the next one. My ios is 11.4.1. (iPhone 6s).

[aareeph]

No luck on iPhone 5c 10.3.3 and iPod touch 12.0.0 :)

These are the steps I am doing.

1. Open Safari
2. Play song in m.soundcloud.com
3. Press lock button of device
4. Press Home button to view "Now Playing" section in Control Center.

[aareeph]

Hey @psntr any luck? :)

[psntr]

Not really, I tried with the web audio API, tho you can play automatically the next song, but you lose all controls on lockscreen and it stops the audio when you leave the tab.

Therefore in my opinion there seems to be no solution. It's really exhausting to see Safari and other mobile browser blocking that idle of javascript when you leave the browser.

[aareeph]

I tried one workaround.

I added one silent mp3 file with html5:true flag and played it on loop. This will keep the web audio players playing when you leave the browser or lock iOS screen.

Although it isn't a neat solution for iOS Control Center because you lose all controls and it shows the progress bar of silent audio.

[psntr]

Hm but with the default the file keep on playing even when you leave the browser or switch app/tab. The problem is that you still cannot play the next song automatically right? Even with the silent mp3 playing as a second layer.

[aareeph]

With this approach you can play next song automatically. Basically you'll need a new instance of Howler that plays the silent audio on loop as soon as user press the Play button. Rest of your web audio code will remain same.

[psntr]

So the only downside with the silent MP3, is that you lose iOS Control Center because you lose all controls? And basically you have two layer of Audio (silent one on loop) and real Audio (from your playlist or other source)? Isn't it a way to make the real Audio as priority on iOS Control Center?

Do you have a fiddle of that solution?

[aareeph]

Sorry I don't have fiddle solution but here's some code excerpts from my project:

//Silence Player
this.silencePlayer = new Howl({src: [AUDIO_SILENCE], html5: true, loop: true});
this.silencePlayer.play();

//Main Player
this.audio_main = new Howl({src: [AUDIO_MAIN], html5: false});
this.audio_main.play();
this.audio_main.on('end', () => this.playNextAudio());

[psntr]

thank you I will give a try this afternoon!

[BobbyTalvin]

Hey, guys.I find a way to resolve the auto play problem:

this.sound = new Howl({src, onend: id => {
  this.sound._sounds[0]._node.src = newSrc
  this.sound._sounds[0]._node.play()
}})

It's working well on the IDevices

[aareeph]

Hi @Bobby90622, thanks for the solution. I am getting following error while trying this approach.

Property '_sounds' does not exist on type 'Howl'.

[aareeph]

@Bobby90622 I fixed the above error and able to play next audio.

(<any>this.sound)._src = newSrc;

The only drawback for this solution is that it doesn't show 'Now Playing' section in iOS Control Center and also it doesn't work with html5: true which means that user needs to wait for next audio to completely load before it starts playing.

Thanks for you solution though :)

[goldfire]

This should be fixed with the 2.1.0 release that I'll be getting out sometime this week (using the new HTML5 Audio object pooling).

[psntr]

@aareeph did you try with the newest version of Howler?

[aareeph]

Hi @psntr, it's been almost a month I couldn't resume the work on this project. But I am catching up with the Howler's new releases and looking forward to implement them by this week. I'll update you!

Thanks!

[psntr]

@aareeph thank you I look forward to hear from you!

[aareeph]

Hi @psntr I tried a simple code with the newest Howler version and it's working like a charm! I tried it with iOS 12.1.4 and iOS 10.3.3 on both Chrome and Safari browsers.

var sound1 = new Howl({
  src: ['audio/sound1.webm', 'audio/sound1.mp3'],
  html5: true,
  onend: function() {
    sound11.play();
  }
});

var sound11 = new Howl({
  src: ['audio/sound2.webm', 'audio/sound2.mp3'],
  html5: true

});

[psntr]

@aareeph thanks for your feedback, does that mean the audio source changed also automatically (while the phone was locked-up?)

[aareeph]

I didn't try changing the audio source because in my case it would be beneficial to have two Howl objects so I could preload the next audio while first audio is playing.

[o-k-l-r]

@aareeph

Could you please provide a simple jsfiddle example that works in background with iOS. I'm failing to get your examples working so far..

[aareeph]

Hi @goldfire,

I am using v 2.1.1 and it seems that the workaround you introduced related to HTML5 audio pool 1008 isn't working anymore on iOS 12.2. I've tried both Safari and Chrome browsers and next audio doesn't play when the browser is in background or mobile screen is locked.

However I am still able to play next audio in sequence in iOS 10.3.3.

What do you suggest?

Thanks!

[aareeph]

Hi @lia-mr, please find the project here. I think URLs pointing to mp3 files are expired, please use some other audios.

http://next.plnkr.co/edit/kAKW146vL6jbAtJJvd3H

Thanks!

[jackwpearson]

This still seems to be an issue. @aareeph have you had success getting the next track to play when a phone screen is off?

[aareeph]

Hi @jackwpearson, unfortunately I couldn't find any workaround for getting the next track to play in iOS. For Android Chrome it worked fine for me. Sorry!

[frontedDancecolor]

Hi, is there any solution?