How can I use html5 audio tags to play local mp3s on Android using phonegap?

问题

I am deploying on Android 4.4 with v19 of the Android SDK on phonegap. I have an mp3 file in the same folder as my index.html file that I want to play using html5 audio tags.

<html>
  <body>
  <audio controls>
    <source src='sound.mp3' type='audio/mpeg'>
  </audio>
  </body>
  <script type="text/javascript" src="cordova.js"></script>
</html>

It doesn't work and fails with the following:

I/AwesomePlayer(  124): setDataSource_l(URL suppressed)
E/        (  124): Failed to open file '/android_asset/www/sound.mp3'. (No such file or directory)

It looks like a path issue, but I've tried all permutations I can think of. I think it is more fundamental, like AwesomePlayer can't access mp3s that are stored in the android_asset directory.

Using the Media plugin for phonegap works fine as other answers have suggested, but since audio tags work for external media, and the Media plugin works for internal media, it seems like this should be easily fixable. I also have a huge working app that uses audio tags everywhere and I really don't want to rewrite it to use the Media plugin. Is there an easy obvious fix, or should I submit a bug report?

回答1:

Let me summarize what I found from various questions/answers on the similar topic:

the audio tag is kinda broken in the Android WebView. So yes this is a bug.
use of audio tag for playing local files works fine on iOS and desktop browsers

playing local files from SD cards works on Android:

<audio controls="controls">
   <source src="file:///sdcard/test.mp3" type="audio/mpeg"/> 
</audio>

your current implementation using Media object is the only option if your would like to play files from Android device at the moment.

Links to explore:

https://groups.google.com/forum/#!topic/phonegap/PneF6j47yFY
Play sound on Phonegap app for Android
HTML5 audio not playing in PhoneGap App (Possible to use Media?)

回答2:

So far my only solution is to dynamically rewrite the audio tags as phonegap Media enabled buttons. Not great:

$("audio").replaceWith (option,element) ->  "
  <span class='audio' data-src='#{$(element).attr('src')}'>
    <button class='Play'>Play</button>
    <button style='display:none' class='Pause'>Pause</button>
    <button style='display:none' class='Reset'>Reset</button>
  </span>
"

$("span.audio").on "click", "button.Play", (event) ->
  audioTarget = $(event.target).parent()
  unless audioTarget.data("audio")?
    path = "/android_asset/www/#{audioTarget.attr("data-src")}"
    audioTarget.data("audio", new Media(path))
  audioTarget.data("audio").play()
  $(event.target).hide().siblings().show()

$("span.audio").on "click", "button.Pause", (event) ->
  $(event.target).parent().data("audio").pause()
  $(event.target).hide().siblings().show()

$("span.audio").on "click", "button.Reset", (event) ->
  $(event.target).parent().data("audio").seekTo(0)
  $(event.target).hide().siblings().show()

来源：https://stackoverflow.com/questions/21524884/how-can-i-use-html5-audio-tags-to-play-local-mp3s-on-android-using-phonegap

标签

android

html5

cordova

html5-audio