вопрос
Хотел использовать вывод треков с подгрузкой плеера uppod.
Использовать буду BlockPro или стандартныйми средствами.
Короче гооря вот что получилось -
http://www.goldaccordion.com/testaudio.html
Плюс такого использования - странице можно использовать сколько угодно треков и плеер будет каждый раз подгружаться. Такой вывод не будет грузить проц. у посетителей.
Но проблема одна - Если выводить новости в блоке, то как всем новостям дать ID по порядку (от 1 до XX)?
Например выводим на странице новости с помощью BlockPro, то как дать каждой новости ID?
Использовать буду BlockPro или стандартныйми средствами.
Короче гооря вот что получилось -
http://www.goldaccordion.com/testaudio.html
Плюс такого использования - странице можно использовать сколько угодно треков и плеер будет каждый раз подгружаться. Такой вывод не будет грузить проц. у посетителей.
Но проблема одна - Если выводить новости в блоке, то как всем новостям дать ID по порядку (от 1 до XX)?
Например выводим на странице новости с помощью BlockPro, то как дать каждой новости ID?
Итоговый рабочий код.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Плеер</title>
<style>
.track{
margin:10px;
}
.trackIcon{
width:24px;
height:26px;
background-color:#000;
background: url("http://www.goldaccordion.com/engine/classes/flashplayer/play.png") 0 0;
cursor: pointer;
}
.trackIcon2{
width:480px;
height:26px;
padding-left:30px;
padding-top:6px;
font-size:13px;
}
</style>
</head>
<body>
<div class="track">
<div class="trackIcon" data-player-id="1" data-player-link="http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3">
<div class="trackIcon2">Ричард Гальяно - Вальс Марго</div>
</div>
</div>
<div class="track">
<div class="trackIcon" data-player-id="150" data-player-link="http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3">
<div class="trackIcon2">Ричард Гальяно - Вальс Марго</div>
</div>
</div>
<div class="track">
<div class="trackIcon" data-player-id="2" data-player-link="http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3">
<div class="trackIcon2">Ричард Гальяно - Вальс Марго</div>
</div>
</div>
<div class="playNext">следующий</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var playerId = 'trackPlayer', // ID создаваемого плеера, чтобы не повторяться по сто раз
flashvars = {
'm': 'audio',
'st': 'http://www.goldaccordion.com/engine/classes/flashplayer/audiostyle.txt',
'file': '',
'uid': playerId
},
params = {
allowFullScreen: "true",
allowScriptAccess: "always",
bgcolor: "#ffffff"
},
att = {
id: playerId
},
playerExists, // Служебная переменная для определения играет ли трек
currentId; // Служебная переменная для определения id проигрываемого трека
$(document)
// Слушаем клик по кнопке плеера
.on('click', '[data-player-id]', function(e) {
var $this = $(this), // Текущий элемент
$prevTrack = $('[data-player-id="' + currentId + '"]'), // Предыдущий трек
id = $this.data('playerId') // id текущего элемента (трек)
flashvars.file = $this.data('playerLink'); // Назначаем недостающую переменную
if (playerExists) {
// Удаляем запущенный плеер
swfobject.removeSWF(playerId);
// Показываем спрятанный трек
$prevTrack.show();
}
// Добавляем после текущего элемента блок под плеер.
$this.after('<div style="display: none;" id="' + playerId + '"></div>');
// Прячем текущий трек
$this.fadeOut('500',function () {
// Показываем обёртку плеера
$(playerId).show();
// Запускаем плеер
new swfobject.embedSWF('http://www.goldaccordion.com/engine/classes/flashplayer/uppod.swf', playerId, '300', '27', '10.0.0', false, flashvars, params, att);
});
// Переназначаем переменную, содержащую информацию об ID запущенного трека
currentId = id;
// Говорим, что плеер запущен.
playerExists = true;
})
// Слушаем клик по кнопке следующего трека
.on('click', '.playNext', function(e) {
e.preventDefault();
var $firstTrack = $('[data-player-id]:first'), // Первый трек в списке
$currentTrack = $('[data-player-id="' + currentId + '"]'), // Предыдущий трек
$nextTrack = $currentTrack.parent().next().find('[data-player-id]'), // Следующий трек (тут фигово реализовано, привязка к структуре вёрстки)
$targetTrack = ($nextTrack.length) ? $nextTrack : $firstTrack; // Трек, который должен играть
$targetTrack.trigger('click');
});
</script>
</body>
</html>
