Как играть в mp3 с помощью Javascript?

У меня есть каталог на моем сайте с несколькими mp3. Я динамически создаю их список на веб-сайте с помощью php.

У меня также есть функция перетаскивания, связанная с ними, и я могу выбрать список этих mp3 для воспроизведения.

Теперь, указав этот список, как я могу нажать на кнопку (Play) и сделать сайт первым в списке? (Я также знаю, где музыка находится на веб-сайте)

Ответы

Ответ 1

Если вы хотите версию, которая работает для старого браузера, я сделал эту библиотеку:

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

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

Ответ 3

Возможно, вы захотите использовать новый элемент 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);
}

Edit:

Чтобы добавить поддержку Flash, добавьте элемент object внутри тега audio.

Ответ 4

Вы можете использовать <audio> тег HTML5 для воспроизведения звука с использованием JavaScript.

Но это не кросс-браузерное решение. Он поддерживается только в современных браузерах. Для кросс-браузерной совместимости вам, вероятно, нужно использовать Flash для этого (например jPlayer).

Таблица совместимости браузеров предоставляется по ссылке, упомянутой выше.

Ответ 6

Вы можете попробовать SoundManager 2: он будет прозрачно обрабатывать тег <audio> везде, где он поддерживается, и использовать Flash везде, где это не так.

Ответ 7

Предполагая, что браузер поддерживает воспроизведение в формате MP3 и является совершенно новым для поддержки новых функций JavaScript, я хотел бы предложить взглянуть на jPlayer. Вы можете увидеть краткое описание учебника о том, как его реализовать.

Ответ 8

Наслаждайтесь этим;)

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