CODEWITHSUNDEEP
androidhtmlcordova
rand
rand

Reputation: 322

MP3 audio file is not playing in Android apps using Html5 and phoneGap

I have created one sample phonegap application, the objective of that application is to play an static mp3 file. I have placed the file under the following location /android_asset/www folder.

The HTML5 content is as follows:

        <html>
          <head>
            <title>PhoneGap Back Button Example</title>
            <script type="text/javascript" src="phonegap-1.2.0.js"></script>
            <script type="text/javascript">

            var myMedia = null;
         var playing = false;
         //Method for playing the audio Track1 file
           function playAudio() {
      if (!playing) {
                            myMedia.play(); 
       document.getElementById('play').src = "images/pause.png";
       playing = true; 
      } else {
       myMedia.pause();`enter code here`
                            document.getElementById('play').src = "images/play.png";    
                            playing = false; 
      }
        }     </script>

         <body onload="onLoad()">
           <h1>Audio Player</h1>
           <p id="audio_position">0.000 sec</p>
           <p>
//The Html page contains a dropdown of option from which  we can select the source from where the media file can be played

            <select id="playlist" onchange="updateMedia()">
                                     <optionvalue="/android_asset/www/audio/track1.mp3">Asset</option>
            </select>
           </p>
           <a href="#" onclick="playAudio()"><img id="play" src="images/play.png"></a>
           <a href="#" onclick="stopAudio()"><img id="stop" src="images/stop.png"></a>
         </body>
        </html>

The activity class is as below:

 package com.plugin.myapp;



import com.phonegap.DroidGap;

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends DroidGap
 {

 @Override

 public void onCreate(Bundle savedInstanceState)
 {

  super.onCreate(savedInstanceState);

    // super.loadUrl("file:///android_asset/www/index.html");



  WebView webview = new WebView(this);

       setContentView(webview);


       //Media.getContentUriForPath("/android_asset/www/audio/track1.mp3");
   //this helps to load the html page
        webview.loadUrl("file:///android_asset/www/audio/example.html");



        WebSettings webSettings = webview.getSettings();

     webSettings.setJavaScriptEnabled(true);

   }
}

What might the problem be?

Upvotes: 0

Views: 4658

Answers (2)

Andrew Trice
Andrew Trice

Reputation: 701

HTML5 audio is not reliable across mobile web views. On android 2.x, which is on 80% of all Android devices, it is not supported at all. You can see platforms where HTML5 audio is supported here: http://caniuse.com/#feat=audio On platforms where it is supported, there are codec inconsistencies, so some devices can play MP3, some cannot, but can play other audio encoding formats. The previous answer is correct, you can use PhoneGap's Media class to reliably play MP3 audio. If you are using multiple audio files, and want the ability to preload them or layer them (like in a game scenario), you can also use the LowLatencyAudio native plugin.

Upvotes: 0

sabz23
sabz23

Reputation: 11

Create a MEDIA object before trying to play it... Something like this... myMedia = new Media(src, onSuccess, onError); here src is the audio file that you want to play http://docs.phonegap.com/en/2.0.0/cordova_media_media.md.html#Media

Upvotes: 1

Related Questions