javascript - 如何使用 Javascript 播放 mp3？

Question

我的网站上有一个目录，里面有几个 mp3。我使用 php 在网站中动态创建了它们的列表。

我还有一个与它们相关的拖放功能，我可以选择要播放的那些 mp3 列表。

现在，给出该列表，我如何单击按钮（播放）并使网站播放列表的第一个 mp3？（我也知道网站上的音乐在哪里）

score 114 · Accepted Answer

114

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

于 2012-07-04T14:37:06.237 回答

score 29 · Accepted Answer

如果你想要一个适用于旧浏览器的版本，我制作了这个库：

// 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;
    }
}

文档：

Sound接受三个参数。声音的sourceurl，volume(from 0to 100) 和loop( trueto loop，falsenot to loop)。
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

score 9 · Accepted Answer

您可能希望使用新的 HTML5audio元素来创建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 支持，您需要在标签内附加一个object元素。audio

score 2 · Accepted Answer

您可以使用<audio>HTML5 标签使用 JavaScript 播放音频。

但这不是跨浏览器的解决方案。它仅在现代浏览器中支持。对于跨浏览器的兼容性，您可能需要为此使用 Flash（例如jPlayer）。

浏览器兼容性表在我上面提到的链接中提供。

score 1 · Accepted Answer

你可以试试SoundManager 2：它会透明地处理<audio>任何支持的标签，并在不支持的地方使用 Flash。

score 0 · Accepted Answer

假设浏览器支持 MP3 播放并且相当新以支持更新的 JavaScript 功能，我建议看一下jPlayer。您可以查看有关如何实现它的简短演示教程。

score 0 · Accepted Answer

0

用于音频 mp3 播放器的 Jquery 插件http://www.jplayer.org/0.2.1/demos/

于 2012-07-05T10:59:11.210 回答

score -1 · Accepted Answer

好好享受 ;）

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

javascript - 如何使用 Javascript 播放 mp3？

8 回答 8

Related

Reference