如何使用 Javascript 播放 mp3？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11330917/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to play a mp3 using Javascript?
提问by aF.
I have a directory on my website with several mp3's. I dynamically create a list of them in the website using php.
我的网站上有一个目录，里面有几个 mp3。我使用 php 在网站中动态创建了它们的列表。
I also have a drag and drop function associated to them and I can select a list of those mp3 to play.
我还有一个与它们关联的拖放功能，我可以选择要播放的那些 mp3 的列表。
Now, giving that list, how can I click on a button (Play) and make the website play the first mp3 of the list? (I also know where the music is on the website)
现在，给出该列表，我如何单击按钮（播放）并使网站播放列表的第一个 mp3？（我也知道网站上的音乐在哪里）
采纳答案by Mageek
If you want a version that works for old browsers, I have made this library:
如果你想要一个适用于旧浏览器的版本，我已经制作了这个库：
// source: https://stackoverflow.com/a/11331200/4298200
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;
}
}
Documentation:
文档：
Soundtakes three arguments. The sourceurl of the sound, the volume(from 0to 100), and the loop(trueto loop, falsenot to loop).stopallow to startafter (contrary to remove).initre-set the argument volume and loop.
Sound需要三个参数。source声音的url、volume(from 0to 100) 和loop( trueto loop, falsenot to loop )。stop允许start之后（与 相反remove）。init重新设置参数音量和循环。
Example:
例子：
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
回答by Ties
new Audio('<url>').play()
new Audio('<url>').play()
回答by Jeffrey Sweeney
You will probably want to use the new HTML5 audioelement to create an Audioobject, load the mp3, and play it.
您可能希望使用新的 HTML5audio元素来创建Audio对象、加载 mp3 并播放它。
Due to browser inconsistencies, this sample code is a bit lengthly, but it should suit your needs with a bit of tweaking.
由于浏览器不一致，这个示例代码有点长，但它应该可以通过一些调整来满足您的需求。
//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);
}
Edit:
编辑：
To add Flash support, you would append an objectelement inside the audiotag.
要添加 Flash 支持，您需要object在audio标签内附加一个元素。
回答by antyrat
You can use <audio>HTML5 tag to play audio using JavaScript.
您可以使用<audio>HTML5 标签通过 JavaScript 播放音频。
But this is not cross-browser solution. It supported only in modern browsers. For cross-browser compatibility you probably need to use Flash for that (for example jPlayer).
但这不是跨浏览器的解决方案。它仅在现代浏览器中受支持。对于跨浏览器兼容性，您可能需要为此使用 Flash（例如jPlayer）。
Browsers compatibility table is provided at link I mentioned above.
浏览器兼容性表在我上面提到的链接中提供。
回答by Clément Andraud
Try this audio player script generator :
试试这个音频播放器脚本生成器：
http://www.scriptgenerator.net/44/Audio-player-script-generator/
http://www.scriptgenerator.net/44/Audio-player-script-generator/
回答by Haroldo_OK
You could try SoundManager 2: it will transparently handle the <audio>tag wherever it's supported, and use Flash wherever it isn't.
您可以尝试SoundManager 2：它会在<audio>任何支持的地方透明地处理标签，并在不支持的地方使用 Flash。
回答by paulius_l
回答by RAM
Enjoy it ;)
好好享受 ;）
<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>
回答by Parag
Jquery plugin for audio mp3 player http://www.jplayer.org/0.2.1/demos/
音频 mp3 播放器的 Jquery 插件http://www.jplayer.org/0.2.1/demos/
