你好
我的扩展有一些问题,我制作了一个无线电播放器,但是我添加了一个音量控制,例如当你将滑块滑动到音量的25%时,音频的音量下降了至25%,但当您关闭弹出窗口然后再次打开弹出窗口时,滑块为100%,音频音量为25%。
所以我要做的是:
将滑块保持在弹出窗口关闭时的值,因此当用户再次打开弹出窗口时,滑块的值仍然是25%而不是回到100%
代码:
的 popup.html:
<a class="playback" href="#">
<img id="play" src="img/play.png" />
</a>
<div class="mutebtns">
<a id="mute-bt" href="#">
<img id="mute" rel='tipsy' src="img/unmuted.png" title="Mute" />
</a>
</div>
<div stle="display:inline;">Volume:<span id="val"></span></div>
<div id="slider"></div>
的script.js:
var bgPage = chrome.extension.getBackgroundPage();
// Volume control
$(function() {
$("#slider").slider({
animate: "true",
value : 100,
step : 1,
range : 'min',
min : 0,
max : 100,
slide : function( event, ui ){
var value = $("#slider").slider("value");
bgPage.$("#audio_player")[0].volume = parseFloat(value / 100);
$("#val").html(ui.value + "%");
}
});
$("#val").html($("#slider").slider("value") + "%");
});
background.html:
<div id="audiocontainer">
<audio id="audio_player" src="http://85.25.118.16:7502/;livestream.mp3" width="320" height="80"></audio>
<div id="slider"></div>
</div>
提前致谢:)
答案 0 :(得分:1)
直接从背景页面的<audio>
元素读取实际音量,而不是滑块上的无关值:
$("#val").text(bgPage.$("#audio_player")[0].volume * 100 + "%");
如果您想要保留设置,请考虑将值保存在localStorage
:
slide : function( event, ui ){
var value = $("#slider").slider("value");
bgPage.$("#audio_player")[0].volume = parseFloat(value / 100);
localStorage.setItem('volume', value);
$("#val").html(ui.value + "%");
}
});
var volume = localStorage.getItem('volume');
if (volume == null) {
// Not saved yet, use default value
volume = 100; // 100%
}
$("#val").text(volume + '%');
// And in the background page:
// After creating the <audio> element:
var volume = localStorage.getItem('volume');
if (volume == null) {
// Not saved yet, use default value
volume = 100; // 100%
}
audioElement.volume = volume / 100;
我建议不要为获取音量重复相同的代码,而是为它创建一个函数。这样可以更轻松地维护代码。
答案 1 :(得分:0)
不是将滑块的值设置为100,而是将其设置为当前音量。
value: $('#slider')[0].volume,