How to use Audio in a Mobile Chrome App

问题

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?

回答1:

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?

来源：https://stackoverflow.com/questions/21804080/how-to-use-audio-in-a-mobile-chrome-app