My cordova app downloads an audio file from the web. This works fine and the track is being saved in
"cdvfile://localhost/persistent/JukeboxDownloads/Test.mp3"
I get the URL of the file like that inside the success call of my downloader:
entry.toURL();
I then try to play the downloaded file using an audio tag (iOS) like this:
<audio src="file:///Users/Marc/Library/Developer/CoreSimulator/Devices/59AA8A4B-5CE5-42E2-8CF8-7DA0DEB07E99/data/Containers/Data/Application/7406C75B-4509-44C5-A6C7-F71C2D6D27AF/Documents/JukeboxDownloads/Test.mp3" id="audioPlayer" controls>
I also tried to set the src manually using jQuery:
$("#audioPlayer").attr("src","file:///Users/Marc/Library/Developer/CoreSimulator/Devices/59AA8A4B-5CE5-42E2-8CF8-7DA0DEB07E99/data/Containers/Data/Application/7406C75B-4509-44C5-A6C7-F71C2D6D27AF/Documents/JukeboxDownloads/Test.mp3");
However, both did not work for me and I am not able to play the audio, it always says "Error" without further explanation. When I use another source file it works perfectly (that means a file inside my www folder or on the web).
Any ideas why cordova does not play the file?
I would appreciate your help!
Further information: Cordova 5.0;xCode 6.3.1;iOS 8.3
Try referencing the file by creating the src like so:
var src = cordova.file.documentsDirectory + 'JukeboxDownloads/Test.mp3';
I have found that when building the app and rebuilding the referenced GUID for the app changes which causes the URL to be invalid.
In my experience, using cdvfile://localhost/persistent/ works for images but not video or audio files.
Related
I am using DigitalOcean Spaces/Buckets to store audio files and have a URL being generated which points to that file.
In my html file, I am accessing that audio as:
<audio controls>
<source src="my_digital_ocean_file_url">
</audio>
This file is not getting played on the front-end and when I enter the URL on chrome, the file gets downloaded instead of playing on the browser. Is there a way to make the files on the URL playable?
This is related to the backend. You need to provide 'contentType' as audio. The implementation is different based on the programming language you are using for the backend. Please check the sample code in PHP.
$s3->create_object($bucket, $file_name, array(
'fileUpload' => $resized_image,
'contentType' => $_FILES['image']['type'],
'acl' => AmazonS3::ACL_PUBLIC
));
The above issue is not limited to audio files, it's for PDF, Images as well. Follow are some helpful reference
How to view pdf's stored in spaces without them being downloaded
amazon s3 - image downloading instead of displaying in the browser
I was using and outdated browser. Updating the browser solved the issues for me.
I've an audio file on my phone's SD card and I want to play it using my PhoneGap and HTML5 based hybrid mobile app. I am using the HTML5 audio tag as following:
<audio src="cdvfile://localhost/myfolder/subfolder/audio.mp3"><audio>
However unfortunately it doesn't play.
I want this to work on iOS, android and windows.
Please advice.
You should put the sound file in the www folder, or one of its subfolders.
I have successfully used audio tags in Cordova applications.
I have found two cases where audio will not play:
1) use of the new WKUIWebview plugin (does not allow the file protocol in thw www folder)
2) the head is missing a content security policy, which can happen creating an app with Phonegap instead of Cordova
I'm aiming to have a sound occur when the user presses a certain button.
This is working on my desktop and in Chrome on my Android 4.4 phone but when I launch this as a cordova app the audio stops working.
<audio hidden='true' id='win-audio'>
<source src='audio.mp3' type='audio/mpeg' />
</audio>
with the following being called when a click event happens
document.querySelector('#win-audio').load();
document.querySelector('#win-audio').play();
I have tried using a <video> tag instead (with the same mp3 loaded). I've also tried the ogg format in case it's a codec issue but with no luck.
On PhoneGap people solve this using the Media plugin - I'd rather do this properly using HTML5 audio but if that's impossible, is there an equivalent for Mobile Chrome Apps?
After trying many solutions I discovered that we can use the Cordova media plugin to substitute for lack of HTML5 audio support.
First install the plugin from the command line from within your project directory using cca plugin add org.apache.cordova.media
Next add the following line to your config.xml file:
<plugin name="Media" value="org.apache.cordova.AudioHandler" />
You can then use the new Media object from within Javascript as follows:
var audio = new Media('/android_asset/www/path_to_your.mp3');
audio.play();
Note that you must issue the correct path that Cordova expects, which is NOT relative to the Javascript file the code is in. The above will work for Android, and to support iOS see: iOS Phonegap Media Object - How do I access a resource in the WWW folder?
If I have two video tags in a webpage with the same file reference, will it downloaded twice or will it use the same downloaded file?
Please indicate if the behavior differs per browser.
When I run a page test for Chrome, it appears to download the same video file each time that video is referenced. I'm using HTML5 <video> tags.
I am using fancybox within a html page and I am calling an flv file via a swf file, plays fine locally and works via the web, the problem is that I need to link all of my assets with remote urls as I need to host the html elsewhere. So html hosted on server A and assets on server B. So my thoughts turn to adding the flash parameter to the query.fancybox-1.3.4.pack.js file and this is where I get stuck.
http://www.myofficeheadset.com/video.html
I've located the object tag in the query.fancybox-1.3.4.pack.js file I just need to add the allowScriptAccess parameter
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+e.width+'" height="'+e.height+'"><param name="movie" value="'+c+
'"></param>';P="";b.each(e.swf,function(x,H){C+='<param name="'+x+'" value="'+H+'"></param>';P+=" "+x+'="'+H+'"'});C+='<embed src="'+c+'" type="application/x-shockwave-flash" width="'+e.width+'" height="'+e.height+'"'+P+"></embed></object>
Any help would be much appreciated
Justin
Using the video player within Flash usually loads the movie content dynamically from another location or file. It seems like the flash is loading perfectly fine, but it can not find the movie to load. You should make the path to this movie inside the swf an absolute path, as the relative directory changes based on where the swf is loaded into.