У меня есть каталог на моем сайте с несколькими mp3. Я динамически создаю их список на веб-сайте, используя php.Как играть в mp3 с помощью Javascript?
У меня также есть функция перетаскивания, связанная с ними, и я могу выбрать список этих mp3 для воспроизведения.
Теперь, указав этот список, как я могу нажать на кнопку (Воспроизвести) и сделать сайт, чтобы воспроизвести первый mp3-список? (Я также знаю, где находится музыка на сайте)
Если вы хотите версию, которая работает для старого браузера, я сделал эту библиотеку:
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
Можно ли узнать, когда заканчивается музыка? –
У вас есть длина музыки? – Mageek
поддержка браузеров для простого аудио: http://caniuse.com/#search=audio –
Вы можете использовать тег HTML5 для воспроизведения аудио с использованием JavaScript.
Это не межсерверное решение. Он поддерживается только в современных браузерах. Для кросс-браузерной совместимости вам, вероятно, нужно использовать Flash для этого (например, jPlayer).
Таблица совместимости браузеров предоставляется по ссылке, упомянутой выше.
Можете ли вы предоставить пример flash? –
@aF. вы можете увидеть много демо здесь: http://jplayer.org/latest/demos/. jPlayer является открытым исходным кодом и выпущен под лицензиями GPL и MIT. – antyrat
Попробуйте этот генератор игрок сценария аудио:
http://www.scriptgenerator.net/44/Audio-player-script-generator/
Вы, вероятно, хотите использовать новый элемент 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:
Чтобы добавить поддержку флэш, вы бы добавить к object элемент внутри audio тега.
Я знаю, что этот ответ 4 года. Но список из них здесь, это лучший. Я немного изменил его, чтобы служить моим целям. Но он работает на все. Даже IE. И это действительно что-то говорит. – durbnpoisn
Вы можете попробовать SoundManager 2: он будет прозрачно обрабатывать тег <audio> везде, где он поддерживается, и использовать Flash везде, где это не так.
new Audio('<url>').play()
Полная документация: 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>
Jquery плагин для аудио mp3-плеер http://www.jplayer.org/0.2.1/demos/
В современных браузерах, вы можете использовать [HTML5 в '