解析HTML5音频标签与jQuery交互实现播放控制-优快云博客

本文详细介绍了如何使用HTML5的<a>标签结合jQuery来创建动态音频播放器，包括自动播放、进度条显示、按钮切换播放状态等功能，并解决了在设置背景头像时未正确显示的问题。

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

今天用到了<audio>标签，总结下

实现下面的效果：

<div class="btn">
		<video src="${xyWorks.worksUrl}" id="videoTag" autoplay="autoplay"></video>
		<img class="play-btn"  src="${pageContext.request.contextPath}/images/shareDemoImage/play-btn.png" id="playBtn" style="display:none">
	</div>

<script type="text/javascript">
	$(document).ready(function() {
		var myVideo = $("#videoTag");
		myVideo.on('canplaythrough', function() {//当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本
			$("#playBtn").show();//加载完才可以显示按钮！
// 			alert('加载完可以开始播放了 ！隐藏loading按钮！');
		});
		myVideo.on('loadeddata', function() {//当媒介数据已加载时运行的脚本。
			var duration = Number(myVideo[0].duration / 60);
			duration = duration.toFixed(2)">;//小数点后保留位数

			$("#already").html("0.00");
			$("#no-already").html("/"+duration);
		});
		myVideo.on('timeupdate', function() {当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本
			var currentTime = Number(myVideo[0].currentTime / 60);
			currentTime = currentTime.toFixed(2)//小数点后保留位数
			$("#already").html(currentTime);
		});
		$("#playBtn").click(function() {
// 			alert('暂停：'+myVideo[0].paused);
			if (myVideo[0].paused) {//audio的属性和方法
				myVideo[0].play();
				$(this).attr("src", "${pageContext.request.contextPath}/images/shareDemoImage/play-btn.png");
			} else {
				myVideo[0].pause();
				$(this).attr("src", "${pageContext.request.contextPath}/images/shareDemoImage/play-btn-pause.png");
			}
		});
		var userLogo = '${xyUser.logoUrl}';
		if(userLogo==""){
			userLogo="http://csfddsf.jpeg";//默认头像
		}
		$(".audio-player").css("background-image","">url('"+userLogo+"')");
	});
</script>

刚开始的时候这样写：

$(".audio-player").css("background-image","'">userLogo'</span>");

背景头像死活显示不出来，发现问题在这里，没有加url,加上url就可以了，告诫自己

</pre><pre code_snippet_id="498906" snippet_file_name="blog_20141027_6_9849702" name="code" class="javascript">

----------------------------------------------------------------------------------

今天遇到一个问题，用jquery获得audio对象，然后控制它暂停，结果发现提示pause()不是一个函数

代码如下

原因在于，audio的函数是针对dom对象的，而不是针对jquery对象

而$("#audioPlayer")获得是时jquery对象，所以要先吧jquery对象转为dom对象。

$("#audioPlayer").get(0)j即可

html5