2

ローカルに保存された mp3 ファイル (アプリの一部として配信) を再生する簡単なデモ アプリを作成しました。phonegap の Media-Object の代わりに html5-audio を使用したいと考えています。howler.js フレームワークを使用してパフォーマンスを向上させています。

ローカル ファイルは に保存されwww/res/audio/2.mp3ます。

デスクトップブラウザで実行すると、すべて正常に動作します。ただし、Android デバイスに展開すると機能しません。厄介なことは、リモートでホストされている mp3 ファイルの再生がピーチにしか機能しないため、ローカル ファイルで使用する URL に問題があると思います。さまざまな url-"versions" を試しましたが、以下のどれも機能しません:

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

それは私を夢中にさせます。それを機能させる方法と私の間違いは何ですか? 以下のコードを参照するか、ここからコード全体をダウンロードしてください。

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;
}
4

2 に答える 2

-1 
$('#playSelected').click(function() {
   var media = new Media(your_audioUrl);
   media.play();
}
于 2014-08-18T13:08:46.647 に答える