/**
* 播放audio标签视频控制
*
*/
//等待音频加载完毕 点击每一段录音进行播放
$('.lis').click(function(){
$('.j_voiceCont').show();
var src = $(this).attr("src");
$(this).addClass('cur').siblings().removeClass('cur');
$("#audios").attr('src',src);
if($("#audios")[0]){
var medias = $("#audios").get(0);
if($("#audios")[0].addEventListener){
$("#audios")[0].addEventListener("loadedmetadata", function(){
var duration = Math.ceil(this.duration); //获取总时间
//控制播放暂停
$('.voiceReady').addClass('voicePlaying');
medias.play();
loadedmetadata(medias,duration)
})
}else{
$("#audios")[0].attachEvent("loadedmetadata", function(){
var duration = Math.ceil(this.duration); //获取总时间
//控制播放暂停
$('.voiceReady').addClass('voicePlaying');
medias.play();
loadedmetadata(medias,duration)
})
}
}
});
/**
* 可应用于倒计时
* 该函数求我们已知秒数求小时,分钟,秒的具体时间,
* h---小时
* m---分钟
* s---秒数
* 如果h,m,s小于10,显示的样式为 01
* 如果计算没有小时,那么将不显示小时
* @param {Object} val
*/
function getShowTime(val){
var h = Math.floor(val/3600);
var m = Math.floor((val - h*3600)/60);
var s = Math.floor(val - h*3600 - m*60);
h = h<10?"0"+h:h;
m = m<10?"0"+m:m;
s = s<10?"0"+s:s;
//判断为00,是因为上面进行了字符串的拼接
if(h == "00"){
return m+":"+s;
}else{
return h+":"+m+":"+s;
}
}
//控制音频函数
function loadedmetadata(medias,duration){
$('.v_timesEnd').html(getShowTime(duration));
//控制播放暂停
$('.voiceReady').click(function(){
var that = $(this);
console.log(medias.paused)
if(!medias.paused){
that.removeClass('voicePlaying')
medias.pause();
}else{
that.addClass('voicePlaying');
medias.play();
}
});
/**
* 音频滑动条
*/
//获取进度条总宽度
var totalLen = $('#sliderInner').width();
var $sliderTrack = $('#sliderTrack'),
$sliderHandler = $('#sliderHandler'),
percent,
dist,
startLeft = 0,
startX = 0;
$sliderHandler.on('touchstart', function (e) {
startLeft = parseInt($sliderHandler.css('left'));
startX = e.changedTouches[
音频进度条设置
最新推荐文章于 2024-06-03 13:34:36 发布
本文详细介绍了如何在网页中集成音频元素,并实现音频播放的进度条控制。通过使用HTML5的Audio API,可以获取音频播放进度,同步更新进度条的状态,提供用户友好的播放体验。同时,讨论了如何处理播放、暂停、缓冲等事件,确保进度条的准确反映音频的实时状态。
摘要由CSDN通过智能技术生成