Jquery音频位置控制

Question

我有一个简单的基于jquery的MP3播放器。要控制音频，我有这个代码：

<input type="range" min="0" max="1" step="0.1"/>

$(document).ready(function() {    
$(".audio-clip input[type='range']").on("input", function() {
$(this).parent("div").find("audio")[0].volume = this.value;
});
});

我想知道，如果不是用MP3歌曲中的range元素来控制音频位置，我怎么能做到这一点？

Answer 1

假设您不能使用标准的controls属性来处理卷和扫描文件，那么您可以使用与已经为卷实现的逻辑类似的逻辑来控制文件中的位置。

您可以使用值从0到100的range元素，然后根据值的百分比设置音频的currentTime。另外请注意，您可以使用timeUpdate事件在播放文件时移动范围滑块。试试这个：

<div class="audio-clip">
<audio id="audio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto"></audio>
<label>
Volume:
<input type="range" class="volume" min="0" max="1" step="0.1" value="1" />
</label>
<label>
Position:
<input type="range" class="position" min="0" max="100" step="1" value="0" />
</label>
</div>

$(".audio-clip .volume").on("input", function() {
var audio = $(this).closest("div").find("audio")[0];
audio.volume = this.value;
});
$('.audio-clip .position').on('input', function() {
var audio = $(this).closest("div").find("audio")[0];
audio.currentTime = (audio.duration / 100) * this.value;
});
$('audio').on('timeupdate', function() {
var pc = (audio.currentTime / audio.duration) * 100;
$(this).closest('div').find('.position').val(pc);
})

请注意，由于跨域音频源，该示例在片段中不起作用，但它确实起作用，正如您在下面的链接中看到的那样：

工作示例