I am trying to make SoundJS work with angular on mobile devices. The problem is that mobile devices require the sound to be played in direct response to a touch event. However in SoundJS, when user selects a song to play, it has to get loaded first and then gets played when the loadComplete handler is called. SoundJS folks suggest a hack-ish way by launching the entire application (the JavaScript code) from a touch event
http://www.createjs.com/tutorials/Mobile%20Safe%20Approach/
However, i have no idea how to make this work with angular. Has anyone figured this out ?
Related
I'm developing a web app for the Galaxy Tab S3 that allows the user to draw with a Samsung S-Pen. The S-Pen has a button on the side which I know can be used by native Android applications to perform various functions. However, I am having a hard time figuring out how to identify which event gets fired in the browser when this button is pressed (or even if an event is fired?).
I have tried out all of the PointerEvents and TouchEvents and I tried identifying an event here: https://patrickhlauke.github.io/touch/
I also found nothing in the S-Pen SDK:
https://developer.samsung.com/galaxy-spen-remote/overview.html
And unfortunately this post was removed:
https://stackoverflow.com/questions/51489489/detecting-pen-stylus-button-events-in-javascript
Does anybody know the name of the event or where I can figure this out?
I'm facing problem with facebook video embedded on my post. My client wanted me to follow this method: https://medium.com/#BenBillups/facebook-video-embeds-that-actually-work-57037f8cdcf3
I've done all of the part except PHP code because that wasn't required by my client. Now what is happening. When page loads a play button appear to start video. On click it work just fine. It plays the video but only on desktops. The click event triggers on mobiles and tablets. But it doesn't start the video.
Please take a look at https://candylish.com/mix-and-match-swirl-cookies/ and also check in mobile. You'll see the difference.
In short, you've to click twice in mobile to start video.
Please help me sort this out.
Thanks :)
I think you are simply dealing with mobile browser's general reluctance to start playing video, when they can't determine it was directly connected to a user interaction (and therefor likely willingly triggered by the user.)
//Autoplay
FB.Event.subscribe('xfbml.ready', function(msg) {
if (msg.type === 'video') {
msg.instance.play();
}
});
This code waits for one of the SDK's events to fire and then tries to call the play method, introducing exactly the kind of asynchronism/detachment that gets this blocked, because techniques like that are often used in a malicious way.
In short, you've to click twice in mobile to start video.
That second click is "a whole different animal" altogether ... it happens on the native play button of the (now) embedded social plugin. The other script is not involved at all any more at this point, and this click is a direct user interaction that triggers the video to play, so it is allowed to work. This isn't nested into anything asynchronous or callbacks, it is straight up click => trigger play.
I don't think you will find any example using this technique where this will work differently.
Mobile browsers are more gracious when it comes to autoplay-on-page-load(!) videos, if those videos do not contain an audio track or are embedded to be muted by default. I don't think Facebook offers the latter as an option for mobile to begin with (the data-autoplay attribute does that for desktop, but is documented to not work on mobile) - so at most you could try with a Facebook video that is silent to begin with; but apart from that I'm not sure this restriction resp. when it actually gets lifted even applies here, it's probably not going to fulfill your client's requirement either.
I started typing this as a comment, but besides that it has gotten a little longer now, in this case I think it can't be done actually simply is the answer, even if it might not be a satisfying one.
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.
So making a HTML5 game using the new Cocos2D Javascript 3.0 that just came out. Come into a pretty annoying pain in the ass with how audio is played on iOS and iPad. My game is aiming to be cross platform, and the audio works on browser and android devices. It even works on Windows Phone!
I have tried manipulating iOS's event handler (I'm aware that it doesn't allow you to play audio unless the user interacts with the device) but previous versions of cocos2D HTML5 have suggested that it's audio engine used to support iOS with no hassle. Now, it doesn't seem to...
Also I've looked at alternatives such as Howler.js, however implementing that to work with iOS requires that I have SimpleAudioEngine, which I do not believe 3.0 has.
Can anyone recommend any solutions? I'd be happy enough if I was even able to just play the background music on iOS.
I was using this to help for anyone interested
http://www.cocos2d-x.org/docs/manual/framework/html5/release-notes/v3.0a/upgrade-guide/en
Fixed it. As I said, you can only play sounds once the user has actually interacted with the system, via a touch or click etc... I had this prior to asking my question. Seems the problem was that the audio hadn't loaded in time for the event to be triggered :D
Changed my audio to a .mp3 since it's much smaller, and wrapped my music to be played upon button entry.
var closeItem = cc.MenuItemSprite.create(
cc.Sprite.create(res.play),
playButton,
function () {
cc.log("New Game!");
this.playEffect();
);
playEffect:function() {
var audioengine = cc.audioEngine;
audioengine.playMusic(res.music, true);
}
I'm breaking my head for few days trying to solve this and can't seems to find answer.
I'm trying to build a proof of concept for video player using HTML5 that works on Android and IOS, the trick is that at certain times i need to display objects on the video itself.
Now i would normally use the Video on Canvas or Video tag to solve it and then just create a layer on that with whatever additional data i want synced and triggered by the timer (on my specific example i've used PopcornJS to trigger time-based events).
NOW, it works fine on normal desktop browsers and it works well enough for android
but it seems that Safari won't render it no matter what... it insist on opening the video in it's own player that disregard any additional JS/HTML.
Ref about the issue can be seen here.
Afraid it isn't currently possible on iPhone in Safari. I've been working on an interactive presentation web app and have encountered the same problem.
This question covers the problem of full screen only video on the iPhone. The answers mention the webkit-playsinline attribute but point out that it only works inside a UIWebView object, not in Safari.
Hopefully this will change at some point in the future.