I've built a microsite, that play random songs with Spotify. On desktop-browsers, there is no problem - I play the preview_urls - perfect! But on iPhone (iOS), the preview_url has no response - my player isn't play the preview. Looks like Safari couldn't load the song.
I've built the player with howler.js.
http://glui.me/?i=q229w7c61iyb02c/2014-06-30_at_17.23.png/
Anyone same problem with Spotify and iOS/Safari? Anyone an idea whats going wrong here?
Thank you!
Audio is locked on iOS until a sound is played within a user interaction (like a 'touchstart' event). v1.1.22 of howler.js has implemented a new feature that will try to automatically unlock the audio, but depending on your UI setup it may be a good idea to show an overlay of some sort that requires the user to touch the screen before they can use the app, thus unlocking the audio.
The howler.js docs have been updated explaining this: https://github.com/goldfire/howler.js#ios-playback
Related
I am attaching a screenshot for reference to get more elaborated idea about the problem am facing.. Kind of hell.
I am well aware about autoplay policy and have gone through possible approches which involves user interaction. Also, am not a fond of displaying any screen or button to user to make him click, never, i do not want that.
I am developing a wordpress plugin and having microphone feature which can attach to textbpx on any wordpress website, user clicks on it (user interaction) comes in.
I have also read that i need to resume suspended audio context, which am doing and as you can see in screenshot the state of audio context "running" before and after audio elements play mathod.
I am using audio element created using Audio() constructor.
Note: screenshot is a photo of mac system, I am debugging iphone xr using usb cable.
Can somebody help me out or enlighten me on what am doing wrong or there is any technical limitation.
Sigh! after a week lasted hell finally I managed to make things works.
To give an overview of solution let me first describe high level rough idea of work flow which has problem on iOS Sfari.
Problematic workflow
clickHandler --> AudioContext creation --> Playing audio using audio element.
All the audios followed by this workflow miserably failed in 'play' promise.
Solution which worked for me
clickHandler --> Play audio using audio element -> AudioContext creation --> Playing audio using audio element.
The point of interest in a solution which worked for me is you have to play audio using audio element as first line of code in 'clickHandler'. No doubt the promise still fails but subsequent audios does play.
Also, I was creating new audio element for each new audio source to be played, Which was wrong as auto-play policy imposed on 'per-element' basis. So instead of creating new audio element for each source I just create it once on page load (or whatever suits for you as one time creation) and whenever I want to play different audio file I just change the '.src' property/attribute.
So this is how It worked for me. I must mention throughout the week lasted hell, previously answered questions here and their problem specific solutions have been guiding light which gave me new perspective in a hunt for solution. Also the articles on internet, webkit , chrome, apple's documentation on Auto play policy helped a lot.
I am developing a website where the landing page shows a video of waves at the beach. The customer then wanted me to implement audio in connection with that screen (some sea sounds).
On my way home listening to music, I checked the site from my mobile device. Everything worked great, but the music I was listening to (from Spotify, but I guess it's the same behaviour with other music apps), stopped.
I consulted Google, but didn't find a solution. Is there a way to prevent that?
Your music was playing by an app in your mobile . But when you open mobile browser , and then go to the website which has a video and sound on the front page . The browser tried to run the video with music . That's why your background app , which was playing music got interrupted as browser was also trying to handle the same audio api .
The same thing happen to me on my android mobile . But the recent chrome update has fixed the issue . But mozila and other browsers are not enabling the background music till.
I have no idea about iphone .
It makes complete sense. I don't know why you would want two sounds to be playing at the same time. That would be noise I guess. I think you don't have a problem, in fact it is best the website audio pauses other audio instances on your device.
I have checked in my iPhone with this website which has audio in it.
https://guccidive.gucci.com/
And also played song in Spotify and Gaana App. But both sounds are playing concurrently. I have iPhone 6s and used Safari browser to check.
And as Limitless Claver said it's correct only that at a time only 1 sound is playing. Since if you hear 2 sounds at the same time it will become noise for the user. And I can bet that user won't like it at all. So it's perfect to pause all other background sounds when a user is surfing your website.
There is nothing you can do for this. Since that's handled by the browser apps itself. There is nothing as of now we can do in our Website to work the way you want.
While Windows 10 for instance allows this to happen (had two youtube tabs running with sound and another application delivering separate audio), I really question whether this is a good idea on a phone where you basically can only have one app open at any time.
It appears that Apple allows for this to happen, but its depending on the app itself, so nothing you can change for anything but your own app, AFAICT.
I have created a Web App which plays music playlist and it works well on desktop browsers and also in mozilla and opera of android. But When I play the songs on Chrome browser of Android and I turn off the screen, it stops after playing the current song. And as soon as I turn the screen on, it starts loading the next song in line.
From my observations, what I have understood is Google Chrome browser on android pauses the javascript code from executing if the screen is turned off till the screen is not waken up again. Is there any way I can prevent my specific library from pausing? Any approach or events?
Some related this question is what I am looking for: JavaScript halts in inactive android Chrome tab
There are so many WebApps which does not stop playing music. Does it need some permissions from Google App Store?
check what happens with youtube, at least few years ago i had an awful time dealing with that and that's what proved to my client it cant be done in the given time frame and budget. that was actually device specific, on some devices it worked fine and on others it didnt. check if it happens on other devices. the only solutions i could think of ware either to prevent screen turn off (on problematic devices or all of them at the beginning), or to build an app and handle onPause event
I don't think that you can change the behaviour of the Chrome app, if they want to save battery in the background and stop the javascript, you won't reactivate it.
There are maybe some other ways to get it working.
Tell your users that they should use Firefox or Opera on their mobile device.
All apps are allowed to play or stream music in the background, so you could make or use an app for your task.
Maybe you can use the default music player app on android. Open a playlist of streams using the app. (I don't know if this is possible, because I have no android device.)
I know that is not exactly what you want, but a maybe a way to get it working.
I'm using an embedded media player on my website to allow blackberry users to listen to audio without having to download it. (I'm testing this on blackberry bold 9700 and so any cool html5, flash or embed tags wont work) The reason I have it embedded is because I want to be able to keep track of a users listening time.
Basically what I want is to be able to know when a user clicks play or pause. How do I gain control of these buttons? possibly using some jquery?
This is my code for the player:
<object data="myfilepathHere" type="audio/mpeg">embedded track isnt working!</object>
This is the site I used as a reference:
http://devblog.blackberry.com/2009/08/blackberry-browser-embedded-media-content-automatic-playback-how-to/
I can get the two buttons play/pause and stop to show up (and it looks just like it does in the link I've provided) on the blackberry and the track to play so if I can get this to work that would be just dandy. thanks! :D
Sorry, I spent some time trying some ideas out and I'm pretty certain it's not possible to track or listen to any events on the Object. You really need the Audio tag on BBOS 6.0 and higher. If you were doing a WebWorks app instead of a website we have an API that would help (https://developer.blackberry.com/html5/apis/blackberry.audio.player.html).
Supporting 6.0+ is not that bad. You may find that the majority of people who visit your site have that version or higher.
I am developing an iPad app that embeds YouTube videos in HTML5 format into a UIWebView. The problem is that I want to pause the video when a user brings up modal dialog windows, rather than clear or stop the video as many have suggested. This is critical to a good user experience. Does anyone know any JavaScript or API that I can run to simply pause the video when an action that presents a modal dialog will occur?
The method I use to embed is described here.
http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html
This blog explains hot to build a video in HTML 5.
http://blog.steveheffernan.com/2010/04/how-to-build-an-html5-video-player/
Then interact with the video player via the method [myWebView stringByEvaluatignJavaScriptFromString:#"playVideo()"].
I didn't tested but it seems straightforward.
Are you sure we can play embedded YouTube videos in mobile Safari?
Good luck!
Have you tried going through official docs?
https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html