2012-07-04 9 views
17

私はいくつかのmp3で私のウェブサイト上のディレクトリを持っています。 私はPHPを使ってウェブサイトにそれらのリストを動的に作成します。Javascriptを使ってmp3を再生するには?

また、それらに関連付けられたドラッグアンドドロップ機能があり、再生するmp3のリストを選択できます。

ここで、ボタンをクリックして(再生)、ウェブサイトをリストの最初のmp3として再生させるにはどうすればいいですか? (私は音楽がウェブサイト上のどこにあるか知っています)

+0

)あなたは[HTML5の '

答えて

19

古いブラウザのために働くバージョンをしたい場合は、私はこのライブラリを作っています

function Sound(source,volume,loop) 
{ 
    this.source=source; 
    this.volume=volume; 
    this.loop=loop; 
    var son; 
    this.son=son; 
    this.finish=false; 
    this.stop=function() 
    { 
     document.body.removeChild(this.son); 
    } 
    this.start=function() 
    { 
     if(this.finish)return false; 
     this.son=document.createElement("embed"); 
     this.son.setAttribute("src",this.source); 
     this.son.setAttribute("hidden","true"); 
     this.son.setAttribute("volume",this.volume); 
     this.son.setAttribute("autostart","true"); 
     this.son.setAttribute("loop",this.loop); 
     document.body.appendChild(this.son); 
    } 
    this.remove=function() 
    { 
     document.body.removeChild(this.son); 
     this.finish=true; 
    } 
    this.init=function(volume,loop) 
    { 
     this.finish=false; 
     this.volume=volume; 
     this.loop=loop; 
    } 
} 

ドキュメント:

Soundは3つの引数を取ります。サウンドのURL、音量(0〜100)、およびループ(true to loop、false to loop)。 stopは、(removeとは反対に)startの後にすることができます。
init引数のボリュームとループを再設定します。

例:

var foo=new Sound("url",100,true); 
foo.start(); 
foo.stop(); 
foo.start(); 
foo.init(100,false); 
foo.remove(); 
//Here you you cannot start foo any more 
+0

いつ音楽が終了するのかを知ることは可能ですか? –

+1

音楽の長さはありますか? – Mageek

+0

ブラウザーは簡単なオーディオをサポートしています:http://caniuse.com/#search=audio –

2

<audio> JavaScriptを使用して音声を再生することができます。

しかし、これはブラウザ間の解決策ではありません。現代のブラウザでのみサポートされています。クロスブラウザとの互換性を確保するには、おそらくFlashを使用する必要があります(たとえば、jPlayer)。

ブラウザ互換性テーブルは、前述のリンク先で提供されています。

+0

フラッシュサンプルを提供できますか? –

+0

@aF。 http://jplayer.org/latest/demos/でたくさんのデモを見ることができます。 jPlayerはopensourceであり、GPLおよびMITライセンスでリリースされています。 – antyrat

5

あなたはおそらく、Audioオブジェクトを作成してmp3をロードし、それを再生する新しいHTML5 audio要素を使用したいと思うでしょう。

ブラウザの不一致のため、このサンプルコードは少し長くなっていますが、少し調整するだけでニーズに合っているはずです。

//Create the audio tag 
var soundFile = document.createElement("audio"); 
soundFile.preload = "auto"; 

//Load the sound file (using a source element for expandability) 
var src = document.createElement("source"); 
src.src = fileName + ".mp3"; 
soundFile.appendChild(src); 

//Load the audio tag 
//It auto plays as a fallback 
soundFile.load(); 
soundFile.volume = 0.000000; 
soundFile.play(); 

//Plays the sound 
function play() { 
    //Set the current time for the audio file to the beginning 
    soundFile.currentTime = 0.01; 
    soundFile.volume = volume; 

    //Due to a bug in Firefox, the audio needs to be played after a delay 
    setTimeout(function(){soundFile.play();},1); 
} 

編集:

Flashサポートを追加するには、audioタグ内object要素を追加します。

+0

私はこの答えが4歳であることを知っています。しかし、彼らのリストの中で、これは最高のものです。私は私の目的を果たすために少し微調整しました。しかし、それはすべてに作用します。 IEでも。それは本当に何かを言っている。 – durbnpoisn

1

SoundManager 2を試すことができます。<audio>タグは透過的に処理され、サポートされていない場合はどこでも使用できます。

0

ブラウザがMP3再生をサポートしていて、新しいJavaScript機能をサポートするためにかなり新しいと思われる場合は、jPlayerをご覧ください。 これを実装する方法については、短いデモtutorialをご覧ください。

59

new Audio('<url>').play()

+3

完全なドキュメント:https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement – aymericbeaumet

0

はそれを楽しむ;、最近のブラウザで

<html> 
<head> 
    <title>Play my music....</title> 
</head> 
<body> 
    <ul> 
     <li> 
     <a id="PlayLink" href="http://www.moderntalking.ru/real/music/Modern_Talking-You_Can_Win(DEMO).mp3" onclick="pplayMusic(this, 'music_select');">U Can Win</a> 
     </li> 
     <li> 
     <a id="A1" href="http://www.moderntalking.ru/real/music/Modern_Talking-Brother_Louie(DEMO).mp3" onclick="pplayMusic(this, 'music_select');">Brother Louie</a> 
     </li> 
    </ul> 
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script> 
</body> 
</html> 
関連する問題