<audio> not playing on https with Android browsers - android

So, I'm maintaining the main page of an archive located here, where an audio element gets inserted with a randomly chosen RELATIVE link to an audio file. It plays the audio fine on desktop browsers, but it fails to play the audio on Android mobile browsers, like Dolphin Jetpack and Opera Mobile. Code that creates the audio element:
var d = document, $ = function(a){ return d.querySelector(a); }, o, a, b
audios = ["htmlfiles/Log4/Audio Files/1339041384627.png.audio02.ogg",
"htmlfiles/Log4/Audio Files/1339039129463.png.audio01.ogg",
"htmlfiles/Log5/Audio Files/s05_08.png.audio01.ogg",
"htmlfiles/Log6/Audio files/s06_19.png.audio01.ogg",
"htmlfiles/Log7P1/Audio Files/s07_01.png.audio01.ogg",
"htmlfiles/Log10/Audio files/1343286991927.png.audio01.ogg",
"htmlfiles/Log10/Audio files/1343293678793.gif.audio02.ogg",
"AudioFiles/1343888663849.png.audio02.ogg",
"AudioFiles/1345719774310.png.audio01.ogg",
"AudioFiles/1346311163394.png.audio02.ogg",
"AudioFiles/1346919244950.png.audio02.ogg",
"AudioFiles/1347509276756.png.audio01.ogg",
"AudioFiles/1347515470408.png.audio02.ogg",
"AudioFiles/1348079866537.png.audio01.ogg",
"AudioFiles/1349419913717.png.audio01.ogg",
"AudioFiles/1350030423418.png.audio01.ogg",
"AudioFiles/1350033736151.png.audio02.ogg",
"AudioFiles/1351231673165.png.audio01.ogg",
"AudioFiles/1343870457212.png.audio01.ogg"];
/*The code above is in the head tag, the one below is at the end of the body tag*/
window.opera && (o = $('div:not([id])')).parentNode.removeChild(o);
var audio = d.createElement("audio")/*, source = d.createElement("source")*/;
audio.autoplay = audio.controls = audio.loop = true;
// source.type = "audio/ogg";
audio.src =/* source.src =*/ audios[Math.floor(Math.random() * audios.length)];
// audio.appendChild(source);
audio.appendChild(d.createTextNode("Your browser does not support the audio element."));
$("div#container").insertBefore(audio, $("div#container > div:last-of-type").nextElementSibling);
I'd like to know what can cause such behaviour. I've tested both mobile browsers on w3schools' try-it page, and their audio worked fine there. I'm suspecting it could be something with the https protocol.
Edit: I've reported the bug for Opera through the report wizard, and for Mobotap via an email with a link to this question.

Just getting rid of this zombie. In the end, I think updating the browsers at a later point fixed it.

Related

Is there a way to show a Chromecast button inside a WebView?

I am currently developing an Android application using Cordova. This working fine so far, but now that I want to add a Chromecast button to the UI, it does not seem to work. I followed the instructions provided here: https://developers.google.com/cast/docs/chrome_sender/integrate
And this is what my code looks so far:
var CastPlayer = function() {
//...
/* Cast player variables */
/** #type {cast.framework.RemotePlayer} */
this.remotePlayer = null;
/** #type {cast.framework.RemotePlayerController} */
this.remotePlayerController = null;
//...
};
var castPlayer = new CastPlayer();
window['__onGCastApiAvailable'] = function(isAvailable) {
if (isAvailable) {
castPlayer.initializeCastPlayer();
}
};
Inline script inside my index.html.
CastPlayer.prototype.initializeCastPlayer = function() {
var options = {};
// Set the receiver application ID to your own (created in the
// Google Cast Developer Console), or optionally
// use the chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
options.receiverApplicationId = chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID;
// Auto join policy can be one of the following three:
// ORIGIN_SCOPED - Auto connect from same appId and page origin
// TAB_AND_ORIGIN_SCOPED - Auto connect from same appId, page origin, and tab
// PAGE_SCOPED - No auto connect
options.autoJoinPolicy = chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED;
cast.framework.CastContext.getInstance().setOptions(options);
this.remotePlayer = new cast.framework.RemotePlayer();
this.remotePlayerController = new cast.framework.RemotePlayerController(this.remotePlayer);
this.remotePlayerController.addEventListener(
cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED,
this.switchPlayer.bind(this)
);
};
Content of my index.js.
In the index.html, I added the button like this:
<google-cast-launcher id="castbutton"></google-cast-launcher>
Now when I open my Cordova app via browser (Chrome AND Chromium), the cast button shows and I can use it normally. When I open the App on Android, the Button just does not show. Does anybody know what causes this and if it can be resolved?
We could not find a solution for Cordova, but managed it in Flutter.
We had the same challenge, and we searched high and low. Finally found this solution to make it work with: https://pub.dev/packages/dart_chromecast
Make sure your flutter compiler is downgraded to 13 or below. Otherwise, you will not be able to compile. Unfortunately, their code is not supported in a newer version of the flutter compiler and the author is not going to update anytime soon.

cordova media plugin isnt working on android 4.4 and 5.0.0

i have tried running cordova media plugin in both kitkat and lollipop but it shows no response.
Not even the 3rd parameter for error's function is running.
I have also read almost every article or question about this problem and tried every way i could but nothing worked.
All i finally concluded was that this plugin is not fully supported in android versions above 4.1
I have tried:
<script>
document.body.onload="ready()";
function ready()
{
document.addEventListener("deviceready",function() {
var src;
// src's value
var med=new Media(src,
function() {
alert("success");
},
function(e)
{
alert("failed code: "+e);
});
med.play();
med.release();},false);
}
</script>
here is what i have tried replacing with //src's value
src = 'cdvfile://audio.mp3';
src = 'file:///android_asset/www/audio.mp3';
src = "cdvfile:///android_asset/www/audio.mp3";
src = "audio.mp3";
even after that stupid conclusion i wrote about up there, i still am doubtful that how it still runs on some devices with same os. So, any ideas of making audio files play in cordova app?
MORE INFO:
1>My project structure
appName
|___www
|___[+]css
|___[+]js
|___index.html
|___[+]img
|___audio.mp3
2>I am targeting 6.3.0 marshmallow 😋
Media definitely works for me on marshmallow - albeit I use wav files rather than mp3. I use
audioFail = loadAudio('sounds/no.wav'); where the file is stored in www/sounds
The media constructor is asynchronous but your code uses med immediately after issuing the call to the constructor - have you confirmed that med exists and is defined before you try to call med.play()?

Streaming mp3 in Xamarin Android MediaManager not working

I'm using this nu-get package to stream mp3 url in a Xamarin Android project:
https://github.com/martijn00/XamarinMediaManager
I followed the instructions in the link up there... and it shows the music playing in the notification bar but it is not working (no sound and it's not even starting the song).
Code snippet:
clickButton.Click += (sender, args) =>
{
ClickButtonEvent();
};
private static async void ClickButtonEvent()
{
await CrossMediaManager.Current.Play("http://www.montemagno.com/sample.mp3");
}
I built the sample included in the link, and I got the same result from their sample. Also deployed on real device too, same result!
Image:
Am I missing something ?
Or is the library broken ?
I ran into this using Android Emulator on Hyper-v. It turns out that the network is set to internal. So the http://www.montemagno.com/sample.mp3 could not be found. My workaround:
Hyper-v -> Virtual Switch Manager, add an external network.
Hyper-v -> Virtual Machines->Settings, add new hardware->Network adapter and set to external network.
"Visual Studio Emulator for Android" desktop app, launch phone vm,
in Visual Studio, deploy and run app.
Sound should work from external source now.
Permissions maybe? In the project site it states that for Android:
You must request AccessWifiState, Internet, MediaContentControl and
WakeLock permissions
By default example use ExoPlayerAudioService.
There are issue with url escape in ExoPlayerAudioService.GetSource method
private IMediaSource GetSource(string url)
{
string escapedUrl = Uri.EscapeDataString(url);
var uri = Android.Net.Uri.Parse(escapedUrl);
var factory = URLUtil.IsHttpUrl(escapedUrl) || URLUtil.IsHttpsUrl(escapedUrl) ? GetHttpFactory() : new FileDataSourceFactory();
var extractorFactory = new DefaultExtractorsFactory();
return new ExtractorMediaSource(uri
, factory
, extractorFactory, null, this);
}
string escapedUrl = Uri.EscapeDataString(url);
I.E. http://example.com/path_to_audio.mp3 will be escaped to "http%3A%2F%2Fexample.com%2Fpath_to_audio.mp3" as result HTTP error.
To fix just skip url escape.

Is it possible to implement deep links from website to native app?

I have three buttons on my website, that link to Facebook, Twitter & vk.com pages. I want to open native app, if it is installed on user device. Otherwise, I want URL fallback to be opened.
First of all, I tried to use native app schemes directly with deep-link.js plugin. But, when I tried to open native app URL scheme, when native app was not installed, Safari has shown an error, but opened URL fallback page finally. Default Android browser said that he does not know how to handle such URL scheme:
<a class="btn btn-primary" href="https://www.facebook.com/warpcompany" data-app-ios="fb://profile/838619192839881" data-app-android="fb://page/838619192839881">Facebook</a>
Then I tried to use App Links "standard", that that has so much promotion from Facebook. I even tried to use their hosted app links, to make sure I've generated everything right way. It does not work, it always redirect to website fallback. You can easily test it by yourself from https://fb.me/746134728830806
Is it possible to provide deep link on website, that will open native app without errors at least in default os browsers, or fallback silently to URL?
It is still possible, but on newer versions of the Android default browser you have to use intents instead of just trying to open the deep link. For example replace your fb://page/838619192839881 with
intent://page/838619192839881#Intent;scheme=fb;package=com.facebook.katana;end
This will fallback to Google play by default, but you can override the fallback adding a S.browser_fallback_url:
intent://page/838619192839881#Intent;scheme=fb;package=com.facebook.katana;S.browser_fallback_url=http%3A%2F%2Fwww.facebook.com%2F;end
The fallback should be url encoded.
Of course you'll have issues if the user is not on an Android phone or with an old version of the default browser (or strange browser). You can setup a bunch of conditions and replace your HTML with the correct code for each case.
The accepted answer will only work on Chrome v28 and default browsers for Android 5.0. If you want this to work on other browser like Facebook/Twitter webviews, Firefox, UC and older default browsers than 5.0, you'll need to use some code that's a little more complicated.
Add this function to your JS snippet:
var openSesame = function() {
var method = 'iframe';
var fallbackFunction = function() {
if (method == 'iframe') {
window.location = "market://details?id=com.facebook.katana";
}
};
var addIFrame = function() {
var iframe = document.createElement("iframe");
iframe.style.border = "none";
iframe.style.width = "1px";
iframe.style.height = "1px";
iframe.src = "fb://page/838619192839881";
document.body.appendChild(iframe);
};
var loadChromeIntent = function() {
method = 'intent';
document.location = "intent://page/838619192839881#Intent;scheme=fb;package=com.facebook.katana;end";
};
if (navigator.userAgent.match(/Chrome/) && !navigator.userAgent.match("Version/")) {
loadChromeIntent();
}
else if (navigator.userAgent.match(/Firefox/)) {
window.location = "fb://page/838619192839881";
}
else {
addIFrame();
}
setTimeout(fallbackFunction, 750);
};
Then your button will look like this:
Open the App
Or you can use a service like branch.io which does exactly what you're looking for automatically.
Yes it is! Have a look to this training:
https://developer.android.com/training/app-indexing/deep-linking.html
Is this the information you needed? lmk

Need to pass a variable to remote swf

I am working on a prototype Air for Android application that loads some remote swf files (all created and controlled by me) and I need to be able to pass a variable along to the remote SWF.
Here is a quick break down of how the process currently works:
The Android app, called Loader, is installed on the device.
Loader points to my server and finds Player.swf, which it loads into the main stage. Player.swf show a login screen.
When a user logs in correctly, Player.swf receives an XML response from an API with a list of remote SWF videos to display for the user. Player.swf loops through the XML list and plays each remote SWF, one after the other.
Now, so far, so good. The remote SWF videos load up and play perfectly. But I need to start picking up variables from Player.swf (pulled from the XML response) to use in the remote SWF (things like text strings, user ID's etc)
From all the searching I have done, I believe it is down to the Sandbox environment, as Loader is a compiled application and Player.swf + the remote SWF's are all coming off a server. However, now I am wondering, as Player.swf is the one that has the AS3 code to deal with the XML response, and that is located on the same server as the remote SWF's that are played (and therefore should be the same sandbox?)
I was able to pass a variable along using a URL parameter, but it only works locally and not when I use the Android application.
I found an old blog pot about Sandbox Bridges, but the example file download doesn't work anymore.
Can anyone point me in the right direction in using the parentSandboxBridge function/class to pass along a variable (all examples I have seen deal with passing functions and/or are coded for Flex)
I cannot post any code, as I simply have nothing to show for what I want to achieve (I'm totally stumped on this bit!)
EDIT: I managed to get parameters to pass along (even though it worked locally before, it didnt work with the Loader app > Remote Player > Remote SWF animation combo)
I had to set the application domain context inside Player.swf (seeing as it is on the same server as the remote swf animations, not sure why I needed to do this)
But oddly, I cannot use parent or root to pickup variables?
I've tested this on HTC Desire running android 2.2.2 and it works what I've put in comment thus the answer is as follows:)
your host needs to define similar:
var params:URLVariables = new URLVariables();
params["string"] = "ala ma kota";
params["number"] = 1979;
var request:URLRequest = new URLRequest();
request.data = params;
request.url = "urlVarsReader.swf";
var loader:Loader = new Loader();
loader.load(request);
addChild(loader);
then loaded content (here urlVarsReader.swf) can read them as follows:
var output:TextField = new TextField();
addChild(output);
output.border = true;
output.width = 320;
output.height = 240;
output.wordWrap = true;
output.multiline = true;
var p:Object = getParams(this.loaderInfo);
for (var name:String in p)
{
output.appendText(name + " = " + p[name] + "\n");
}
I have a wrapper method for reading params:
public function getParams(li:LoaderInfo):Object
{
try
{
var params:Object = li.parameters;
var pairs:Object = {};
var key:String;
for(key in params)
{
pairs[key] = String(params[key]);
}
}
catch(e:Error)
{
return {error:e.getStackTrace()};
}
return pairs;
}
best regards
EDIT:
This works only with local content fails with SecurytyError e.g. SecurityError: Error #2070: Security sandbox violation: caller http://example.com/urlVarsReader.swf?string=ala%20ma%20kota&number=1979 cannot access Stage owned by app:/loadwithparams.swf

Categories

Resources