Присоединение регуляторов громкости JS к нескольким аудиоплеерам Audiojs
Я пытаюсь создать слайдер громкости для аудиоплеера audiojs. Я успешно создал ползунок и связал его с аудиоплеером, но моя проблема в том, что он работает только с первым экземпляром проигрывателя. Я думаю, что требуется какой-то цикл, чтобы найти все экземпляры аудиоплеера, но у меня проблемы с написанием цикла.
Javascript работает в моем теге головы:
audiojs.events.ready(function() {
var as = audiojs.createAll();
$('.slider').each(function() {
var slider = $('.slider'),
tooltip = $('.tooltip'),
audioList = document.getElementsByTagName("audio").length;
tooltip.hide();
slider.slider({
range: "min",
min: 0,
max: 100,
value: 50,
change: function(){
var value = $(".slider").slider("value");
for (var i = 0; i > audioList; i++) {
document.getElementById("player").volume = (value / 100);
};
},
start:function(event,ui) {
tooltip.fadeIn('fast');
},
slide: function(event, ui) {
var volume = $('.volume'),
value = $(".slider").slider("value");
document.getElementById("player").volume = (value / 100);
tooltip.css('left',value / 2).text(ui.value);
if(value <= 5) {
volume.css('background-position', '0 0');
}
else if (value <= 25) {
volume.css('background-position', '0 -25px');
}
else if (value <= 75) {
volume.css('background-position', '0 -50px');
}
else {
volume.css('background-position', '0 -75px');
};
},
stop:function(event,ui) {
tooltip.fadeOut('fast');
},
});
});
});
Мне нужно решение, которое совместимо со всеми современными браузерами. У меня есть полные файлы в github здесь.
1 ответ
Я не мог использовать твой audio.min.js но использовал размещенную версию для моего рабочего примера с https://cdnjs.cloudflare.com/ajax/libs/audiojs/1.0.1/audio.js
Я также не мог использовать ваши изображения в моем рабочем примере. Поэтому я надеюсь, что вам будет легко адаптироваться к вашему личному коду.
Рабочий пример: https://jsfiddle.net/Twisty/qx4Lzu9d/4/
HTML
<div id="audio">
<div class="audio-item">
<span class="podcast-type">Audio Summary</span>
<br />
<p><strong>Defining the Optimal Interval for Colonoscopic Screening in Individuals with a Family History of Colorectal Cancer</strong>
<br />
<em>By Matthew B. Yurgelun</em></p>
<audio id="player_1" src="https://traffic.libsyn.com/jcopodcast/Yurgelun.mp3" preload="auto"></audio><div id="vol_1" class="volume-button" data-level="50" data-min="0" data-max="100" data-player-id="1">Volume</div>
<span class="podcast-type">November 2, 2015</span>
<p><strong>Related Article:</strong> <a class="related" href="https://jco.ascopubs.org/content/early/2015/10/26/JCO.2015.62.2035" target="blank">Hennick et al</a></p>
</div>
<hr />
<div class="audio-item">
<span class="podcast-type">Art of Oncology</span>
<br />
<p><strong>The Emerging Role of Gallium-68 Somatostatin-Receptor PET Imaging in Neuroendocrine Tumors</strong>
<br />
<em>By Jonathan R. Strosberg</em></p>
<audio id="player_2" src="https://traffic.libsyn.com/jcopodcast/Strosberg.mp3" preload="auto"></audio><div id="vol_2" class="volume-button" data-player-id="2">Volume</div>
<span class="podcast-type">Decenber 28, 2015</span>
<p><strong>Related Article:</strong> <a class="related" href="https://jco.ascopubs.org/content/early/2015/12/24/JCO.2015.64.0987" target="blank">Sadowski et al</a></p>
</div>
</div>
Здесь вы можете увидеть, что я добавил div создать кнопку громкости для каждого игрока. Я также обратился к id вопрос. Таким образом, у каждого игрока есть уникальный идентификатор и кнопка громкости, которая ассоциируется с ним.
CSS
.audio-item .audiojs {
display: inline-block;
}
.section {
position: relative;
}
.volume-button {
height: 36px;
margin: 0;
margin-top: -28px;
}
.slide-wrapper {
background: #fff;
position: absolute;
width: 28px;
height: 120px;
border: 1px solid #333;
border-radius: 6px;
z-index: 100;
}
.slider {
position: absolute;
top: 12px;
left: 6px;
}
Незначительные модификации только для этого примера.
JQuery
audiojs.events.ready(function() {
var as = audiojs.createAll();
});
$(function() {
$(".volume-button").button({
"icon": "ui-icon-volume-on",
"showLabel": false
}).click(function() {
if ($(".slide-wrapper").length) {
$(".slide-wrapper").remove();
return false;
}
var slideWrap = $("<div>", {
class: "slide-wrapper"
});
var vslide = $("<div>", {
class: "slider"
});
var pid = $(this).data("player-id");
var player = $("#player_" + pid)[0];
var lev = player.volume ? player.volume * 100 : 50;
console.log("Creating Volume Slider for #player_" + pid);
vslide.css("height", "100px");
vslide.slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: lev,
slide: function(e, ui) {
console.log("Setting #player_" + pid + " volume to " +
ui.value);
player.volume = ui.value / 100;
},
stop: function(e, ui) {
slideWrap.remove();
}
});
slideWrap.append(vslide);
$(this).after(slideWrap);
slideWrap.position({
my: "left bottom",
at: "right bottom",
of: "#vol_" + pid
});
});
});
Сначала я отделил загрузку элементов пользовательского интерфейса jQuery от AudioJS. Так как мы хотим иметь возможность использовать audio атрибуты, лучше всего сначала дать им возможность загружаться перед созданием элементов пользовательского интерфейса.
Предполагая, что страница может содержать 1 или более audio Для элементов, для которых мы хотим создать кнопку громкости, я создаю широкую инициализацию и использую селектор класса. Они относятся к кнопке data-player-id атрибут, чтобы знать, какого игрока контролировать. Также каждый слайдер громкости создается на лету и будет читать текущий volume атрибут от игрока, с которым он связан.
Условно мы удаляем все существующие оболочки и их ползунки при нажатии кнопки.
Создать обертку div, необязательно, для использования с ползунком. Может быть полезным для позиционирования и укладки.
Создать слайдер divполучить идентификатор игрока и текущий уровень громкости. Затем инициализируйте слайдер пользовательского интерфейса. Я выбрал вертикальную ориентацию для удовольствия. Так как volume атрибут должен быть между 0 и 1, я устанавливаю мин и макс в 0 и 100 и значение в audio.volume * 100, Это обеспечит правильное представление на слайдере.
На slideмы корректируем значение и передаем его audio элемент: audio.volume = ui.value / 100;
На stopСнимаем слайдер.
Он будет добавлен после кнопки громкости и позиционируется.