Скрипт плеера на HTML5 и JavaScript

#1 2013.06.13 05:28:23

0

jplayer - самый яркий представитель javascript плееров.

Кроме музыки может воспроизводить видео файлы.

Довольно легок в понимании, простая установка с минимум настроек:

$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4a: "/media/mysound.mp4",
oga: "/media/mysound.ogg"
});
},
swfPath: "/js",
supplied: "m4a, oga"
});
});


Использует jQuery. Для кастомизации достаточно менять HTML и CSS не влазя в горы JavaScript. Весит всего 8k (сжатый и минимизированный вариант). Сам плеер бесплатный с отличным руководством и большим сообществом. Там где нельзя использовать HTML5 - используется Flash. Для HTML5 поддерживаемые форматы: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav; для Flash: mp3, mp4 (AAC/H.264)
Отредактировано: Panda 2022.08.16 07:44:14
#2 2013.06.13 05:31:31

0

Следующий в топовом списке - audiojs

Установка еще проще:
Скачать audio.js, player-graphics.gif и audiojs.swf к себе в папочку.
Подключить js <script src="/audiojs/audio.min.js"></script>

Теперь запускаем наш плеер:

<script>
audiojs.events.ready(function() {
var as = audiojs.createAll();
});
</script>


Теперь можно использовать конструкцию <audio src="/mp3/juicy.mp3" preload="auto" /> во всех браузерах.

Скрипт поддерживает только mp3.

Еще один минус этого скрипта - довольно проблематичная кастомизация. Весь html находиться в js файле и вам придется туда залезть. Но есть отличная документация по всему коду и он не использует сторонних библиотек.
Отредактировано: Panda 2022.08.16 07:43:45
#3 2013.06.13 05:33:29

0

Перспективный скрипт для проигрывания музыки - ttwMusicPlayer

Он использует jQuery и потрясающе выглядит.

Использование тоже довольно простое.

<script>
$("body").ttwMusicPlayer(myPlaylist, {options});

//You can specify the following options in the options object:
{
currencySymbol:"$",
buyText:"BUY",
tracksToShow:5,
autoPlay:false,
ratingCallback:function(index, playlistItem, rating){
//some logic to process the rating, perhaps through an ajax call
}
}
</script>


Поддерживает mp3 и ogg..
Отредактировано: Panda 2022.08.16 07:45:47
#4 2013.06.13 05:36:14

0

Если вам не нужен красивый дизайн и мощный функционал, то можно попробовать сделать javascript плеер используя HTML5 самому (используя jQuery).

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

упрощен html код

<audio id="audio-player" name="audio-player" src="song.mp3" ></audio>
<div id="message"></div>
<a id="play-bt" href="#">Play music</a> |
<a id="pause-bt" href="#">Pause music</a> |
<a id="stop-bt" href="#">Stop music</a>


javscript код

<script>
$(document).ready(function(){
$("#play-bt").click(function(){
$("#audio-player")[0].play();
$("#message").text("Music started");
})

$("#pause-bt").click(function(){
$("#audio-player")[0].pause();
$("#message").text("Music paused");
})

$("#stop-bt").click(function(){
$("#audio-player")[0].pause();
$("#audio-player")[0].currentTime = 0;
$("#message").text("Music Stopped");
})
})
</script>
Отредактировано: Panda 2022.08.16 07:46:29