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

【问题标题】：phonegap - Playing html5 audio from local ressourcephonegap - 从本地资源播放 html5 音频
【发布时间】：2014-08-18 07:24:21
【问题描述】：

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

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

在我的桌面浏览器上运行时一切正常。但是，当部署到我的 android 设备时，我无法让它工作。奇怪的是：远程托管的 mp3 文件的播放效果很好，因此我认为我在本地文件中使用的 url 有问题。我尝试了不同的 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;
}

【问题讨论】：

您解决了这个问题吗？我遇到了相同的#howlerjs + #phonegap 墙。我自己做了测试，我也下载了你的代码版本，但我没有找到方法。
很遗憾没有！ android 的浏览器中似乎有一个错误/“功能”阻止 html5-autio 播放......
天哪。我的完整项目基于 web 应用程序开发 > 音频 > howlerJS > 代码复制 > Phonegap。你有没有像我一样（fiddle）切换到 phonegap 媒体插件和var media = new Media(your_audioUrl);media.play();？你最终采取的解决方案是什么。
我在howlerjs github上问过，看来有希望。 github.com/goldfire/howler.js/issues/224
好像是mp3的问题，试过ogg？您能否在 github 或 Dropbox 上再次提供您的种子，以便社区可以做进一步的测试。

标签： javascript html cordova audio howler.js

【解决方案1】：

此代码在 phonegap 中工作。

  <body>

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

 </body>

【讨论】：

您确定这适用于 Android 吗？就我的研究而言，Android Web View 似乎对所有 html5-audio 都有问题！
它在 ios 中工作。我没有在安卓上测试。但在 IOS 中工作正常。
是的，那么问题仍然存在：howler.js 在内部也使用 html5-audio。
我认为你应该使用Phonegap插件，它可以在android和IOS中工作docs.phonegap.com/en/3.0.0/cordova_media_media.md.html#Media

【解决方案2】：

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

【讨论】：

如上所述，我不想使用 Media-object！