将 JS 音量控件附加到多个 Audiojs 音频播放器
Posted
技术标签:
【中文标题】将 JS 音量控件附加到多个 Audiojs 音频播放器【英文标题】:Attaching JS volume controls to multiple Audiojs audio players 【发布时间】:2017-01-21 07:49:15 【问题描述】:我正在尝试为 audiojs 音频播放器创建一个音量滑块。我已成功创建滑块并将其绑定到音频播放器,但我的问题是它仅适用于播放器的第一个实例。我认为它需要某种循环才能找到音频播放器的所有实例,但我在编写循环时遇到了麻烦。
在我的 head 标签中运行的 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 here 中有完整的文件。
【问题讨论】:
创建了以下工作示例进行测试:jsfiddle.net/Twisty/qx4Lzu9d 我看不到您的 html 中哪里定义了任何滑块。当你运行$('.slider').each()
时,有0项被选中;因此,循环迭代 0 次。
它在我链接到 aobve 的 github 目录中的 audio.min.js 文件中,以便它在每次 audiojs 代码运行时自动构建它。
好的,我仍然没有在生成的 HTML 中看到任何内容。无论如何,我有一些我会建议的更新。首先,所有id
属性必须是唯一的。你有两次#player
。这将在调整音量时在您选择播放器时产生问题。我也会使用 ui.value
而不是 $(".slider").slider("value")
,因为这是模棱两可的。
【参考方案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
问题。因此,每个玩家都有一个唯一的 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 UI 项的加载与 AudioJS 分开。由于我们希望能够使用 audio
属性,因此最好在创建 UI 元素之前先加载它们。
假设页面可能包含我们想要为其创建音量按钮的 1 个或多个 audio
元素,我创建一个广泛的初始化并使用类选择器。这些参考按钮的data-player-id
属性以了解要控制的玩家。此外,每个音量滑块都是动态创建的,并且会从与之关联的播放器中读取当前的volume
属性。
有条件地,当单击按钮时,我们会删除所有现有的包装器及其滑块。
创建一个包装器div
,可选,与滑块一起使用。有助于定位和造型。
创建一个滑块div
,获取玩家ID和当前音量。然后初始化 UI Slider。为了好玩,我选择了垂直方向。由于volume
属性需要介于0 和1 之间,因此我将最小值和最大值设置为0 和100,并将值设置为audio.volume * 100
。这将确保我们在滑块上获得正确的表示。
在slide
上,我们调整值并将其传递给audio
元素:audio.volume = ui.value / 100;
在stop
上,我们移除了滑块。
它将附加在音量按钮之后并定位。
【讨论】:
以上是关于将 JS 音量控件附加到多个 Audiojs 音频播放器的主要内容,如果未能解决你的问题,请参考以下文章