audio标签的使用（实现音乐的进度条功能）

最新推荐文章于 2024-06-13 19:47:20 发布

恐●v●易燃

最新推荐文章于 2024-06-13 19:47:20 发布

阅读量5.1k

点赞数 2

分类专栏： html 文章标签： jquery html5 javascript

本文链接：https://blog.youkuaiyun.com/qq_41888962/article/details/108859534

版权

html 专栏收录该内容

2 篇文章

订阅专栏

这篇博客详细介绍了如何使用jQuery来初始化和控制音频播放，包括添加播放和暂停事件监听、更新播放进度以及创建进度条交互功能。通过定义回调函数，实现了音乐播放、暂停状态的切换，并动态更新播放时间和进度条。此外，还展示了进度条对象的构造和操作方法，以及音量控制的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.前端页面

链接：https://pan.baidu.com/s/1Ntc0lSY1-ceYS1Oww3v5_w
提取码：rqaw
前端页面截图

2.jQuery实现步骤

初始化audio元素

//定义一个全局变量，用来存储公用数据
var rem = []
// 初始化函数
function initAudio(){
	// 在body标签中添加音乐标签
	rem.audio=$(`<audio src="song/1.mp3" controls="controls" ></audio>`).appendTo("body");
	
	// 给音乐标签绑定事件之后所触发的函数
	rem.audio[0].addEventListener("play",audioplay); //添加播放事件，播放时并持续执行audioplay函数（下面有写）
	rem.audio[0].addEventListener("pause",audiopause);//添加播放事件，暂停时并持续执行audiopause函数（下面有写）
	// timeupdate,代表音乐播放过程中只要发生变化就触发updateProcess函数
	rem.audio[0].addEventListener("timeupdate",updateProcess);
}
//执行函数
initAudio();

书写回调函数audioplay，audiopause，updateProcess

// 音乐播放之后触发的函数
function audioplay(){
	//music_bar是创建的audio对象，在下文有写
	music_bar.lock(false);//取消进度条的锁定
	rem.paused=false;//更新音乐的播放状态(暂停)
	$(".btn-play").addClass("btn-state-paused");//暂停按钮
}

// 音乐暂停之后触发的函数
function audiopause(){
	music_bar.lock(true);//添加进度条的锁定
	rem.paused=true;  //播放的状态
	$(".btn-play").removeClass("btn-state-paused");//播放按钮
}

// 更新进度条
function updateProcess(){
	// 如果音乐不是暂停状态，则继续执行函数的代码块，否则返回
	if(rem.paused!==false) return true;
	// 调用对象music_bar的函数goto
	music_bar.goto(rem.audio[0].currentTime/rem.audio[0].duration);
	// 音乐的总时间，handleTime是把秒数处理成分钟和秒
	var duration=handleTime(this.duration);
	// 音乐播放的当前时间
	var currenttime=handleTime(this.currentTime);
	$(".playtime").text(duration);
	$(".zm-current-time").text(currenttime);
}

// 时间处理的函数
function handleTime(seconedTime){
	// 定义一个变量保存分钟
	var minute=parseInt(seconedTime/60,10);
	if(minute<10){minute="0"+minute};
	console.log(minute);
	// 定义变量存放秒数
	var second=(seconedTime-minute*60).toFixed(2).split(".")[0];
	console.log(second);
	if(second<10){second="0"+second};
	var Time=minute+":"+second;
	// 返回最终的时间数值
	return Time;
}

编写播放按钮的功能

// 点击播放按钮控制暂停和播放
$(".btn-play").click(function(){
	// 切换播放和暂停的函数
	pasued();
})

// 音乐播放暂停的函数
function pasued(){
	// paused,保存音乐播放和暂停的状态
	if(rem.paused===false){
		//音乐是播放状态，调用pause()函数来让音乐暂停
		rem.audio[0].pause();
	}else{
		//其他的就让它播放
		rem.audio[0].play();
	}
}

音乐加载完成，初始化进度条

// 当音乐标签加载完成之后所触发的函数
rem.audio[0].oncanplay=function(){
	// 音乐的总时间
	var duration=handleTime(this.duration);
	// 音乐播放的当前时间
	var currenttime=handleTime(this.currentTime);
	$(".playtime").text(duration);
	$(".zm-current-time").text(currenttime);
}

进度条对象

// 关于进度条的变量
//进度条id  初始量  回调函数
// 构造函数
mkpgb=function(bar,percent,callback){
	// 创建实例对象
	this.bar=bar;
	this.percent=percent;
	this.callback=callback;
	this.locked=false;
	this.init();
}
// 创建对象的原型函数
mkpgb.prototype={
	// 进度条的初始化函数
	init:function(){
		// 定义音量和进度条的变量,mdown变量控制鼠标按下和松开的状态
		var mk=this,mdown=false;
		// 给音乐和音量标签添加进度条的html片段
		$(mk.bar).html(`
		<div class="mkpgb-bar"></div>
		<div class="mkpgb-cur" style="width:0%;"></div>
		<div class="mkpgb-dot" style="left: 0%;"></div>
		`);
		// 元素距离浏览器左边的距离
		mk.minlength=$(mk.bar).offset().left;
		mk.maxlength=mk.minlength+$(mk.bar).width();
		// 当窗口发生改变,触发的函数
		$(window).resize(function(){
			mk.minlength=$(mk.bar).offset().left;
			mk.maxlength=mk.minlength+$(mk.bar).width();
		})
		// 监听小圆点
		$(mk.bar+" .mkpgb-dot").mousedown(function(e){
			e.preventDefault();//取消原有事件的默认状态
		})
		
		$(mk.bar).mousedown(function(e){
			if(!mk.locked) mdown=true;
			//掉用bar移动函数
			barMove(e);
		})
		$("html").mousemove(function(e){
			//掉用bar移动函数
			barMove(e);
		})
		$("html").mouseup(function(e){
			mdown=false;
		})
		
		
		// 圆点移动的函数
		function barMove(e){
			// 如果鼠标松开则mdown为false，则跳出整个函数
			if(!mdown) return ;
			// 定义一个变量,存放进度条的百分比
			var percent=0;
			if(e.clientX<mk.minlength){
				percent=0;
			}else if(e.clientX>mk.maxlength){
				percent=1;
			}else{
				percent=(e.clientX-mk.minlength)/(mk.maxlength-mk.minlength);
			}
			console.log(percent);
			// 回调函数，将percent通过回调函数传递给mBcallback(),使用newVal进行接收
			mk.callback(percent);
			// 调用goto函数，将percent百分比通过参数的方式进行传递
			mk.goto(percent);
			
		}
		// 针对音乐和音量的初始进度条的位置
		
		mk.goto(mk.percent);
		
	},
	// 跳转到某个进度条的位置
	goto:function(percent){
		if(percent>1) percent=1;
		if(percent<0) percent=0;
		this.percent=percent;
		$(this.bar+" .mkpgb-dot").css("left",(percent)*100+"%");
		$(this.bar+" .mkpgb-cur").css("width",(percent)*100+"%");
		return true;
	},
	lock:function(islock){
		if(islock){
			console.log("mmm");
			this.locked=true;
			// 添加一个禁止的样式
			$(this.bar).addClass("mkpgb-locked ");
		}else{
			this.locked=false;
			// 取消一个禁止的样式
			$(this.bar).removeClass("mkpgb-locked");
		}
		return true;
	}
	
	
}

进度条的处理

// 音乐进度条拖动函数
function mBcallback(newVal){
	console.log(newVal);
	var newTime=rem.audio[0].duration*newVal;
	// 音乐的播放进度，currentTime，音乐的播放当前时间
	rem.audio[0].currentTime=newTime;
}
// 音量进度条拖动函数
function vBcallback(newVal){
	// 音乐加载完之后，改变音乐的音量
	if(rem.audio[0]!==undefined){
		// volume,音量的属性值
		rem.audio[0].volume=newVal;
		
	}
	// 控制音量是否出现静音状态的小图标
	if($(".btn-quiet").is(".btn-state-quiet")){
		$(".btn-quiet").removeClass("btn-state-quiet");
	}
	if(rem.audio[0].volume==0){
		$(".btn-quiet").addClass("btn-state-quiet");
	}
}

// 关于进度条的处理
var initProcess=function(){
	// 初始化的进度条，创建对象
	music_bar=new mkpgb("#music-progress",0,mBcallback);
	music_bar.lock(true);
	volume_bar=new mkpgb("#volume-progress",0.8,vBcallback);
}
initProcess();