Question

我已经构建了一个简单的演示应用程序，它应该播放本地存储的mp3文件（作为应用程序的一部分提供）。我想使用html5-audio而不是phonegap的Media-Object。我正在使用howler.js框架来获得更好的性能。

本地文件存储在www/res/audio/2.mp3。

下

在桌面浏览器上运行时，一切正常。但是，当部署到我的Android设备时，我无法让它工作。令人厌倦的事情是：远程托管的mp3文件的播放工作只是极好的，因此我假设我使用本地文件的url（s）出了问题。我尝试了不同的url-“版本”，但下面没有一个工作：

www/res/audio/2.mp3
/android_asset/www/res/audio/2.mp3
file:///android_asset/www/res/audio/2.mp3
file://android_asset/www/res/audio/2.mp3

http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3 //works great

它让我发疯了。任何想法如何让它工作，我的错误是什么？请参阅下面的代码或download my entire code here。

的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css" />

    <title>Audio-Test</title>
  </head>
  <body>
    <!-- ------------- -->
    <!-- Script import -->    
    <script src="js/libs/jquery-2.1.1.min.js"></script>
    <script src="js/libs/jquery.mobile-1.4.3.min.js"></script>

    <script src="js/libs/howler/howler.min.js"></script>

    <script src="js/index.js"></script>

    <!-- ---------- -->
    <!-- Start Page -->

    <div id="index" data-role="page" data-theme="a">
      <!-- HEADER, FOOTER -->
      <div data-role="header" data-position="fixed">
      <h1>Audio-Tester</h1>
      </div>

      <!-- CONTENT -->
      <div class="ui-content">
        <h1 id='ready' style='text-align: center;'></h1>

        <select id='urls'></select>
        <button id='playSelected'>Play audio from selected source!</button>

        <div id='log'></div>
      </div>
    </div>

    <!-- ------------- -->
    <!-- Init Phonegap -->
    <script>
      $(document).ready(function() {
        if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|IEMobile)/)) {
          isPhonegap = true;

          $.getScript( 'cordova.js', function() {
            document.addEventListener("deviceready", onDeviceReady, false);
            app.initialize();
          });
        } 
        else {
          //Fallback for desktop browsers!
          isPhonegap = false;
          onDeviceReady();
        }
      });
    </script>
  </body>
</html>

index.js

function onDeviceReady() {
  $('#ready').html("I'm ready!");

  //populate selection
  var basePath = getBasePath();
  var audioUrl = 'res/audio/2.mp3';

  var myOptions = {
      val1 : 'http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3',
      val2 : audioUrl,
      val3 : basePath + audioUrl,
      val4 : 'file://' + basePath + audioUrl,
      val5 : 'file:/' + basePath + audioUrl
  };

  var urls = $('#urls');
  $.each(myOptions, function(val, text) {
      urls.append(
          $('<option></option>').val(val).html(text)
      );
  });

  //append listener to button
  $('#playSelected').click(function() {
    var myHowl = new Howl({ urls: [$('#urls option:selected').text()] });
    myHowl.play();

    $('#log').html($('#log').html() + '<br /> Playing ' + myHowl.urls());
  });
}

function getBasePath() {
  var htmlFilename = 'index.html';
  var path = window.location.pathname;
  path = path.substr(0, path.length - htmlFilename.length);

  return path;
}

Answer 1

此代码适用于phonegap。

  <body>

     <audio controls>
     <source src="horse.mp3" type="audio/mpeg">
     Your browser does not support the audio element.
     </audio>

 </body>

Answer 2

$('#playSelected').click(function() {
   var media = new Media(your_audioUrl);
   media.play();
}

phonegap - 从本地资源播放html5音频

2 个答案: