如何使用Javascript播放mp3？

我在我的網站上有幾個MP3的目錄。我動態地使用php在網站上創建它們的列表。如何使用Javascript播放mp3？

我也有一個拖放功能與他們關聯，我可以選擇這些MP3播放列表播放。

現在，給出這個列表，我怎樣才能點擊一個按鈕（播放），並使網站播放列表的第一個MP3？（我也知道音樂在網站上的位置）

2012-07-04 aF.

在現代瀏覽器中，你可以使用[HTML5的'

如果您希望對舊瀏覽器兼容版本，我已經做這個庫：

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有三個參數。聲音的URL，音量（從0到100）和循環（true爲循環，false爲循環）。
stop允許到start之後（與remove相反）。
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

來源

2012-07-04 14:39:28 Mageek

是否有可能知道音樂何時結束？ –

你有音樂的長度嗎？ – Mageek

瀏覽器支持簡單音頻：http：//caniuse.com/#search=audio –

您可以使用<audio>HTML5標籤通過JavaScript播放音頻。

但這不是跨瀏覽器的解決方案。它僅支持現代瀏覽器。對於跨瀏覽器兼容性，您可能需要使用Flash（例如jPlayer）。

瀏覽器兼容性表在上面提到的鏈接中提供。

來源

2012-07-04 14:23:08 antyrat

你能否提供一個flash例子？ –

@aF。你可以在這裏看到很多的演示：http://jplayer.org/latest/demos/。 jPlayer是開源的，並在GPL和MIT許可下發布。 – antyrat

試試這個音頻播放器腳本生成：

http://www.scriptgenerator.net/44/Audio-player-script-generator/

來源

2012-07-04 14:27:23

你可能會想使用新的HTML5元素audio創建Audio對象，加載MP3和發揮它。

由於瀏覽器不一致，這個示例代碼有點長，但它應該適合您的需要，稍微調整一下。

//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元素。

來源

2012-07-04 14:28:12

我知道這個答案是4歲。但是他們的名單在這裏，這是最好的。我調整了一下，以服務於我的目的。但它適用於一切。甚至IE。這真的是在說些什麼。 – durbnpoisn

你可以嘗試SoundManager 2：它會透明地處理<audio>標籤無論它的支持，並且使用Flash無論它是不是。

來源

2012-07-04 14:28:13

假設瀏覽器支持MP3播放，並且對於支持更新的JavaScript功能相當新穎，我建議您看看jPlayer。關於如何實現它，您可以看到一個簡短的演示tutorial。

來源

2012-07-04 14:28:28

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

來源

2012-07-04 14:37:06 Ties

完整文檔：https：//developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement – aymericbeaumet

享受它;）

<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>

來源

2012-07-04 15:50:52 RAM

jQuery插件音頻MP3播放器http://www.jplayer.org/0.2.1/demos/

來源

2012-07-05 10:59:11 Parag

如何使用Javascript播放mp3？

回答

相關問題