2012-02-15 6 views
7

javascriptを使用してmp3(非常に短い)ファイルを再生するには、ブラウザ間で最も優れた方法はどれですか? ...javacriptを使用してmp3ファイルを再生

EDIT 1、私はさまざまな方法を試してみましたが、問題は常にあります:私は「完全な」プレーヤーを必要としない、私はちょうど私が何かが

起こるたびに呼び出すことができるよりも、機能を必要とする

EDIT 2:

[OK]を、私は私の問題をよりよく説明するためにきました。サーバーはLANに接続されたスマートフォンですが、必ずしもインターネットに接続されているわけではありません。私はファイルが3kb(wavの60kbではなく)の重さのためmp3を使いたいですが、このファイルを再生するメカニズムが "重すぎる"場合(wavファイルを使用する方が良いと思います) その他のおすすめ?

+0

html5オーディオタグ – Johan

+1

http://jplayer.org –

+0

@Johan [this](http://msdn.microsoft.com/en-us/library/gg589489(v = vs.85)でhtml5オーディオタグを試しました。 ).aspx)のコードですが、Chromeでは動作しません – supergiox

答えて

0

Flowplayerをお勧めします。これはFlashとJavaScriptで書かれ、HTML5フォールバックを持っています。

サイドノート:すべてのiOSデバイス(iPadsなど)では、自動再生はありません。

5

直接ダウンロードするだけで、ページをロードできます。ブラウザがMP3をサポートしているかどうかを検出します。そうであれば、直接ダウンロードをAUDIOタグに徐々に強化してください。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Audio demo</title> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script> 
</head> 
<body> 
    <p id="audio"> 
     <a href="BadAppleEnglish.mp3">Listen &raquo;</a>   
    </p> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> 
    <script src="audio.js"></script> 
</body> 
</html> 

とJavaScript::私は構築済みのMP3再生中のプラグインの無数のほとんどがこのように動作することを想像

$(function() { 
var audioElement = $('#audio'), 
    href = audioElement.children('a').attr('href'); 
$.template('audioTemplate', '<audio src="${src}" controls>'); 
if (Modernizr.audio.mp3) { 
    audioElement.empty(); 
    $.tmpl('audioTemplate', {src: href}).appendTo(audioElement); 
} 
}); 

ここのサンプルです。

UPDATE:あなたはjQueryのを使用しないソリューションを好むことを指定するための質問を編集したので

、私は、これはjQueryのを使用しないように書き換えが些細であることを指摘します。それはちょうど長く、エレガントではありません。 CDNからロードされたJavascriptライブラリは、通常、ブラウザによってキャッシュされることに注意してください。

+0

私は編集しました – supergiox

14

使用この:

new Audio('your/url/here').play() 

この(HTMLAudioElement)のドキュメントがMDNで見つけることができますが、コントロールのほとんどはHTMLMediaElementによって継承されていることに注意してください。

関連する問題