web-dev-qa-db-ja.com

Androidブラウザでhtml5オーディオを再生する

Html5 <audio>タグを使用して、ブラウザーでオーディオを再生するjavascriptがあります。 iPhoneブラウザでは正常に動作しますが、Androidでは動作しません。 （Android 2.1でhtc desireを使用してテストします。）誰もが理由を知っていますか？

私のコード：

   function playHTML5(sound, soundcv){
                // sound = url to m4a audio file
                // soundcv = div in which the audioplayer should go

  var audio = document.createElement('audio');
  audio.src = sound;
  audio.controls = "controls";
  if (currentSound != null){
   soundcv.replaceChild(audio,currentSound);
  } else {
   soundcv.appendChild(audio);
  }
  currentSound = audio;
 }

ちなみに、私はiPhoneに表示されるオーディオボタンを拡大しようとしています（デフォルトのものはかなり小さいです）、これまでのところ運はありません-どんなアイデアにも感謝します！

javascriptiphoneandroidaudiohtml5
20
Anders Sundnes Løvlie

FroYoの最新のAndroidブラウザーはHTML5オーディオ要素をまだサポートしていません。これはバグではなく、まだ実装されていない機能です。Gingerbreadで提供される可能性があります。

更新：Gingerbreadブラウザーにはaudio要素があります。

14
Pierre-Antoine LaFayette

Googleへのリンクは次のとおりです。Androidバグ。AndroidでAUDIOタグがサポートされていないために提出されました。投票してください。

http://code.google.com/p/Android/issues/detail?id=10546

ところで、回避策があります。これにより、MP3をAndroid 1.6 .. 2.2のようにネイティブで再生できます。

<video src="test.mp3" onclick="this.play();"></video>
13
Slavik

私もこれを理解できません。ただし、このテストページはApple AndroidでHTML5オーディオを再生します： http://www.Apple.com/html5/showcase/audio

どのようにAppleそれをしますか？

4
Rick

Kindle Fireで問題が発生していましたが、それを修正しているように見える小さな問題が1つ見つかりました。

<audio>
  <source src="someclip.mp3" type="audio/mpeg" />
</audio>

誤って「audio/mp3」を使用していました。ネイティブコントロールのないプレーヤーを使用しています（HTML5/JSを使用）。

1
Kevin

trigger.io を実行しているNexus 7にデプロイするAndroid Jellybeanを使用するプロジェクトでこれを動作させましたが、現時点では絶対URLを使用した場合のみ音声が再生されます。相対パスがプロジェクト内のオーディオをまだ使用していないかわかりませんが、これが誰かの助けになることを願っています...

(function() {

    var currentSound;
    // I have a div called "page"
    var soundcv = document.body;

    // This only works for one sound for simplicity's sake
    function playSound(sound){

        if (currentSound == null){
            var audio = document.createElement('audio');
            audio.src = sound;
            soundcv.appendChild(audio);
            currentSound = audio;
        }

        currentSound.play();
    }

    // This isn't a real audio file URL - replace it with one of your own
    playSound('http://example.com/example.mp3');
})();
1
gavD_UK

audio format を確認しましたか？

1
Jla

私は一日中これをいじくり回してきましたが、ついに私のヤフーwebplayerで私の古いSamsung Droidブラウザーで動作するようになりました：

<a href="somefolder/file.mp3"></a>
<script type="text/javascript" src="http://webplayer.yahooapis.com/player.js"></script>

Works Worksは、テキストの横に小さな矢印アイコンを配置し、クリックしてmp3を再生できます。ヤフーありがとう。

これをローカルでテストすると、ChromeまたはFirefoxブラウザーでオーディオが表示されないことを忘れました。ただし、携帯電話のブラウザーでは問題なく動作します。

0
Robert Beltran

これがハックであることは知っていますが、どこでも機能します（私の知る限り）！

Video要素を使用して、mp3をmp4およびoggファイル（Android上のfirefoxのogg）に変換できます。また、スタイルを設定して、通常のデフォルトプレーヤーが表示されないようにすることもできます。以下のコードを参照してください：

<video id="audioTest" width="1" height="1" style="top: -100px; left: -100px; position: absolute;" preload >
    <source src="audio.mp4" type="video/mp4">
    <source src="audio.ogv" type="video/ogg">
</video>

次に、次を使用してjsコードで再生できます：

var audioTest = document.getElementById("audioTest");
audioTest.addEventListener("ended",onSoundComplete,false);
audioTest.play();
0
Nikos