本文介绍了如何利用jQuery UI库轻松地将滑块与HTML5音频的音量和播放位置进行交互，通过监听事件实时调整音频参数，实现动态控制。
如何使用滑块更改HTML5音频音量或音轨位置？(How to Change the HTML5-audio Volume or Track Position with a Slider? [duplicate])
我知道.play()和.stop()方法。
但有没有办法将滑块连接到音量？ 或滑块到轨道位置？ 那可能吗？
并且感谢帮助。 谢谢！
This question already has an answer here:
I know about the .play(), and the .stop() methods.
But is there a way to link up a slider to the volume? Or a slider to the track position? Is that possible?
And help is appreciated. Thanks!
原文：https://stackoverflow.com/questions/20753756
更新时间：2019-11-19 13:11
最满意答案
jQuery UI使它变得非常简单：
$(function() {
var $aud = $("#audio"),
$pp = $('#playpause'),
$vol = $('#volume'),
$bar = $("#progressbar"),
AUDIO= $aud[0];
AUDIO.volume = 0.75;
AUDIO.addEventListener("timeupdate", progress, false);
function getTime(t) {
var m=~~(t/60), s=~~(t % 60);
return (m<10?"0"+m:m)+':'+(s<10?"0"+s:s);
}
function progress() {
$bar.slider('value', ~~(100/AUDIO.duration*AUDIO.currentTime));
$pp.text(getTime(AUDIO.currentTime));
}
$vol.slider( {
value : AUDIO.volume*100,
slide : function(ev, ui) {
$vol.css({background:"hsla(180,"+ui.value+"%,50%,1)"});
AUDIO.volume = ui.value/100;
}
});
$bar.slider( {
value : AUDIO.currentTime,
slide : function(ev, ui) {
AUDIO.currentTime = AUDIO.duration/100*ui.value;
}
});
$pp.click(function() {
return AUDIO[AUDIO.paused?'play':'pause']();
});
});
#player{
position:relative;
margin:50px auto;
width:300px;
text-align:center;
font-family:Helvetica, Arial;
}
#playpause{
border:1px solid #eee;
cursor:pointer;
padding:12px 0;
color:#888;
font-size:12px;
border-radius:3px;
}
#playpause:hover{
border-color: #ccc;
}
#volume, #progressbar{
border:none;
height:2px;
}
#volume{
background:hsla(180,75%,50%,1);
}
#progressbar{
background:#ccc;
}
.ui-slider-handle{
border-radius:50%;
top: -5px !important;
width: 11px !important;
height: 11px !important;
margin-left:-5px !important;
}
Your browser does not support the audio element
jQuery UI makes it quite simple:
$(function() {
var $aud = $("#audio"),
$pp = $('#playpause'),
$vol = $('#volume'),
$bar = $("#progressbar"),
AUDIO= $aud[0];
AUDIO.volume = 0.75;
AUDIO.addEventListener("timeupdate", progress, false);
function getTime(t) {
var m=~~(t/60), s=~~(t % 60);
return (m<10?"0"+m:m)+':'+(s<10?"0"+s:s);
}
function progress() {
$bar.slider('value', ~~(100/AUDIO.duration*AUDIO.currentTime));
$pp.text(getTime(AUDIO.currentTime));
}
$vol.slider( {
value : AUDIO.volume*100,
slide : function(ev, ui) {
$vol.css({background:"hsla(180,"+ui.value+"%,50%,1)"});
AUDIO.volume = ui.value/100;
}
});
$bar.slider( {
value : AUDIO.currentTime,
slide : function(ev, ui) {
AUDIO.currentTime = AUDIO.duration/100*ui.value;
}
});
$pp.click(function() {
return AUDIO[AUDIO.paused?'play':'pause']();
});
});
#player{
position:relative;
margin:50px auto;
width:300px;
text-align:center;
font-family:Helvetica, Arial;
}
#playpause{
border:1px solid #eee;
cursor:pointer;
padding:12px 0;
color:#888;
font-size:12px;
border-radius:3px;
}
#playpause:hover{
border-color: #ccc;
}
#volume, #progressbar{
border:none;
height:2px;
}
#volume{
background:hsla(180,75%,50%,1);
}
#progressbar{
background:#ccc;
}
.ui-slider-handle{
border-radius:50%;
top: -5px !important;
width: 11px !important;
height: 11px !important;
margin-left:-5px !important;
}
Your browser does not support the audio element
相关问答
更改 audio.volume = ui.value;
至 $("#<?php echo $track_id; ?>").get(0).volume = ui.value;
Change audio.volume = ui.value;
To $("#<?php echo $track_id; ?>").get(0).volume = ui.value;
我不熟悉jMediaelement API，但您可以使用css逆时针旋转音量90度。 你可能不得不搞乱事件处理程序以获得音量控制来跟踪垂直移动而不是水平移动，但这不应该很难。 这是一篇关于用CSS旋转的文章 http://davidwalsh.name/css-transform-rotate Fortunately, Alexander replied to the question himself. Here's his working solution: It's quite simple.
...
答：不可以。目前，您无法更改HTML5音频标签控件的颜色。 如果启用controls属性，则“play”，“pause”和“volume”的外观将取决于浏览器。 通过更多工作，您可以使用JavaScript创建自己的音频播放器界面，该界面连接到音频元素的API。 你的问题是这里提出的更有针对性的版本： 是否可以设置html5音频标签的样式？ 以下是一些关于如何创建独特音频播放器的文章： http://serversideup.net/style-the-html-5-audio-element/
...
将滑块的value分配给视图控制器的init或viewDidLoad的AVAudioSession.sharedInstance().outputVolume 。 请记住import AVFoundation以使用AVAudioSession 。 或者，您可以通过编程方式初始化MPVolumeView而不是将其作为插座。 我相信这是你问题的根源。 Assign your slider's value to to AVAudioSession.sharedInstance().outputVolum
...
volume属性就像不透明度，它在零和一之间，一个是100％。 您的代码非常接近，您只需在设置元素的音量时将value除以100 ： $("#slider").slider({
value : 75,
step : 1,
range : 'min',
min : 0,
max : 100,
change : function(){
var value = $("#slider").slider("va
...
尝试使用MediaElement 。 然后你可以像这样播放你的电台：
media.Source = new Uri(@"http://shoutcastinfo.radiostaddenhaag.com/stad.wax");
media.Play();
并改变音量
...
感谢您的快速响应，但我找到了解决方案，即通过使用 “adb shell服务调用音频7 i32 3 i32 0 i32 1” 其中7是“interface IAudioService”列表中的第七个函数：setStreamVolume(int streamType，int index，int flags，String callingPackage)，3是扬声器，0是音量级别，1是标志。 第二个数字(3)代表以下选项：1：电话3：扬声器4：警报6：蓝牙 注意：当我尝试在我的问题中发布解决方案时，我以r
...
在setVolume()函数中，将代码更改为： var mediaClip = document.getElementById("mediaClip");
mediaClip.volume = document.getElementById("volume1").value;
说明： 我从var mediaClip = document.getElementById("mediaclip").value;更改了第一行代码var mediaClip = document.getElementByI
...
我建议删除以下行： seekslider.value = event.clientX = seekslider.offsetLeft;
这是因为你在使用它之前设置了seekslider的值，这是适得其反的，作为下一行music.duration * (seekslider.value / 100); 完全符合你的要求。 I would recommend removing the following line: seekslider.value = event.clientX = seeksli
...
jQuery UI使它变得非常简单： $(function() {
var $aud = $("#audio"),
$pp = $('#playpause'),
$vol = $('#volume'),
$bar = $("#progressbar"),
AUDIO= $aud[0];
AUDIO.volume = 0.75;
AUDIO.addEventListener("timeupdate", progr
...
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
