48864

Phonegap Build with phonegap 3 and media plugin

Question:

I work on an application build with phonegap build and phonegap 3. I want to let the user to play some external audio files with the app. But I should have miss something because the media can't be find and play.

Here is my config.xml :

<?xml version="1.0" encoding="UTF-8" ?> <widget xmlns = "http://www.w3.org/ns/widgets" xmlns:gap = "http://phonegap.com/ns/1.0" id = "com.phonegap.example" versionCode = "10" version = "1.0.0" > <preference name="phonegap-version" value="3.0.0" /> <!-- versionCode is optional and Android only --> <name>My App</name> <description> Application mobile </description> <author href="https://www.website.fr" email="support@website.fr"> Henri Labarre </author> <gap:platform name="ios" /> <gap:platform name="android" /> <gap:plugin name="org.apache.cordova.core.media" /> <access origin="http://ibeat.org" subdomains="true" /> </widget>

My index.html :

<!DOCTYPE html> <html> <head> <title>My Audio</title> <meta name="viewport" content="width=device-width, height=device-height initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="jquery.mobile1.0b3.min.css" /> <script type="text/javascript" charset="utf-8" src="jquery1.6.4.min.js"></script> <script type="text/javascript" charset="utf-8" src="jquery.mobile1.0b3.min.js"></script> <script type="text/javascript" charset="utf-8" src="main.js"></script> <script type="text/javascript"> function onBodyLoad() { //During testing, Let me know we got this far alert("onBodyLoad"); //Add the PhoneGap deviceready event listener document.addEventListener("deviceready", onDeviceReady(), false); } function onDeviceReady() { //During testing, Let me know PhoneGap actually // initialized //Get our media file and stuff init(); } </script> </head> <body onload="onBodyLoad()"> <section id="main" data-role="page" > <header data-role="header">

My audio

</header> <div data-role="content"> <p id="track">

<p id="pos">

<div data-role="controlgroup"> <a onclick="doPlay();" id="btnPlay" data-role="button" data-icon="arrow-r">Play</a> <a onclick="doPause();" id="btnPause" data-role="button" data-icon="grid">Pause</a> <a onclick="doStop();" id="btnStop" data-role="button" data-icon="delete">Stop</a> </div> </div> </section> </body> </html>

And my script main.js

var fileDur, theMedia, theTimer; function init() { //alert("Init"); var fileName = "http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3"; console.log(fileName); //Create the media object we need to do everything we need here theMedia = new Media(fileName, onMediaSuccess, onMediaError, onMediaStatus); console.log("Got this far!"); console.log(theMedia); //Update the UI with the track name $('#track').html("<b>File:</b> " + fileName); $('#pos').html('Duration: ' + Math.round(theMedia.getDuration()) + ' seconds'); } function onMediaSuccess() { console.log("onMediaSuccess"); window.clearInterval(theTimer); theTimer = null; } function onMediaError(e) { var msgText = "Media error: " + e.message + "(" + e.code + ")"; console.log(msgText); navigator.notification.alert(msgText, null, "Media Error"); } function onMediaStatus(statusCode) { console.log("Status: " + statusCode); } function doPlay() { if(theMedia) { console.log("doPlay"); //Start the media file playing theMedia.play(); //fire off a timer to update the UI every second as it plays theTimer = setInterval(updateUI, 1000); } else { alert("No media file to play"); } } function doPause() { if(theMedia) { console.log("doPause"); //Pause media play theMedia.pause(); window.clearInterval(theTimer); } } function doStop() { if(theMedia) { console.log("doStop"); //Kill the timer we have running theTimer = null; //Then stop playing the audio clip theMedia.stop(); } } function updateUI() { console.log("updateUI"); theMedia.getCurrentPosition(onGetPosition, onMediaError); } function onGetPosition(filePos) { console.log("onGetPosition"); //We won't have any information about the file until it's // actually played. Update the counter on the page $('#pos').html('Time: ' + Math.floor(filePos) + ' of ' + theMedia.getDuration() + ' seconds'); }

Thanks a lot for your kind help!

Edit : add () to the listener Edit2 : add access origin=

Answer1:

I think you should take the line document.addEventListener("deviceready", onDeviceReady, false); out of your onbodyload function and instead add document.addEventListener("deviceready", init, false); after the the definition of the init function in main.js.

As you have an alert in onbodyload, the deviceready event is fired before you start listening it.

Answer2:

Finally i use this code and it's work with phonegap build 3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Media Example</title> <link rel="stylesheet" href="jquery.mobile1.0b3.min.css" /> <script type="text/javascript" charset="utf-8" src="jquery1.6.4.min.js"></script> <script type="text/javascript" charset="utf-8" src="jquery.mobile1.0b3.min.js"></script> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript" charset="utf-8"> // Wait for device API libraries to load // //document.addEventListener("deviceready", onDeviceReady, false); // device APIs are available // //function onDeviceReady() { // playAudio("http://www.mywebsite.fr/addons/Rome.m4a"); //} // Audio player // var my_media = null; var mediaTimer = null; // Play audio // function playAudio(src) { // Create Media object from src my_media = new Media(src, onSuccess, onError); // Play audio my_media.play(); // Update my_media position every second if (mediaTimer == null) { mediaTimer = setInterval(function() { // get my_media position my_media.getCurrentPosition( // success callback function(position) { if (position > -1) { setAudioPosition((position) + " sec"); } }, // error callback function(e) { console.log("Error getting pos=" + e); setAudioPosition("Error: " + e); } ); }, 1000); } } // Pause audio // function pauseAudio() { if (my_media) { my_media.pause(); } } // Stop audio // function stopAudio() { if (my_media) { my_media.stop(); } clearInterval(mediaTimer); mediaTimer = null; } // onSuccess Callback // function onSuccess() { console.log("playAudio():Audio Success"); } // onError Callback // function onError(error) { alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n'); } // Set audio position // function setAudioPosition(position) { document.getElementById('audio_position').innerHTML = position; } </script> </head> <body> <section id="main" data-role="page" > <header data-role="header">

mywebsite

</header> <div data-role="content"> <p id="track">

<div data-role="controlgroup"> <a onclick="playAudio('http://www.mywebsite.fr/addons/Rome.m4a');" id="btnPlay" data-role="button" data-icon="arrow-r">Lecture</a> <a onclick="pauseAudio();" id="btnPause" data-role="button" data-icon="grid">Pause</a> <a onclick="stopAudio();" id="btnStop" data-role="button" data-icon="delete">Stop</a> </div> </div> <p id="audio_position">

</section> </body> </html>

Recommend

  • Using target on div without a href
  • How to display the hotel names that have the maximum count from data base by calculating sum in PHP?
  • how to add semantic ui in a rails app?
  • Why are views not counted if you embed a youtube iframe dynamically using jquery?
  • NetBeans doesn't see style.css [duplicate]
  • How to center a menu using flexbox [closed]
  • Jquery Show & ScrollTop (or ScrollTo)
  • How to add regEx in angular filter
  • I am receiving HibernateException “No Hibernate Session bound to thread, and configuration does not
  • MySQL: Update rows in table by iterating and joining with another one
  • Javascript CORS - No 'Access-Control-Allow-Origin' header is present
  • JBoss External Properties Files in Classpath
  • Adjust width of select element according to selected option's width
  • jQuery ready not fired after rails link_to is clicked
  • Android - Material Design - NavigationView - How to put vertical scroll?
  • Webgrid not refreshing after delete MVC
  • Jquery UI tool tip close icon
  • DomPDF {PAGE_NUM} not on first page
  • Javascript simulate pressing enter in input box
  • HTML download movie download link
  • Updating server-side rendering client-side
  • SSO with signing and signature validation doesn't work
  • MySQL WHERE-condition in procedure ignored
  • Importing jscolor library in angular 2
  • jQuery tmpl and DataLink beta
  • Web-crawler for facebook in python
  • Traverse Array and Display in markup
  • How to disable jQuery.jplayer autoplay?
  • A cron job substitute?
  • trying to dynamically update Highchart column chart but series undefined
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • How to set the response of a form post action to a iframe source?
  • How do I configure my settings file to work with unit tests?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Qt: Run a script BEFORE make
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • java string with new operator and a literal