如何使用Javascript播放MP3?

时间:2012-07-04 14:20:57

标签: javascript html mp3

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

我还有一个拖放功能,我可以选择要播放的mp3列表。

现在,给出该列表,如何点击按钮(播放)并让网站播放列表中的第一个mp3? (我也知道音乐在网站上的位置)

9 个答案:

答案 0 :(得分:79)

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

答案 1 :(得分:20)

如果你想要一个适用于旧浏览器的版本,我已经创建了这个库:

// 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有三个参数。声音的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

答案 2 :(得分:7)

您可能希望使用新的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支持,您可以在object代码中添加audio元素。

答案 3 :(得分:2)

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

但这不是跨浏览器的解决方案。它仅支持现代浏览器。对于跨浏览器兼容性,您可能需要使用Flash(例如jPlayer)。

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

答案 4 :(得分:2)

试试这个音频播放器脚本生成器:

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

答案 5 :(得分:1)

您可以尝试SoundManager 2:它会透明地处理<audio>标记,只要它不受支持,并在任何地方使用Flash。

答案 6 :(得分:0)

假设浏览器支持MP3播放并且支持较新的JavaScript功能相当新,我建议您查看jPlayer。 您可以看到有关如何实施它的简短演示tutorial

答案 7 :(得分: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>

答案 8 :(得分:0)

音频mp3播放器http://www.jplayer.org/0.2.1/demos/

的Jquery插件