开发工具与关键技术：DW2021 jQuery HTML5

撰写时间：2021年 5月 28日

简介与要点：在网页上制作一个音乐播放器我们仅需用到一个新的标签<audio src="素材音乐" controls></audio>；因为我们这个音乐播放不是单曲循环的使用还要用到jQuery插件做一个下拉框式的选择切换功能，所以依旧要使用到jQuery插件；使用jQuery建立一个动态生成的歌曲选择器，再用jQuery设置点击事件或者焦点失去事件，只要能触发下面的切换效果就行

<audio>内的属性以及解析：

autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。

难点：建立失去焦点事件，要做到歌曲选择的下拉框失去焦点的时候播放器切换到对应歌曲：

$(".music").change(function(){

//设置焦点失去事件

var src=$(this).val();

//获取当前所点击的内容

$("#aa").text("歌曲："+src+"")

//赋值显示当前歌曲

$("#pp").empty();

//清空子元素

$("#pp").append('<audio src="素材/music/'+src+'.mp3" controls></audio>')

//赋值设置播放歌曲

})

完成后效果参考，如图：

源代码仅供参考：

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>音频播放界面</title>
		<style type="text/css">
			.first {
				height: auto;
				width: 630px;
				margin: 0 auto;
				text-align: center;
			}
			
			.box {
				height: 300px;
				width: 630px;
				background-color: #fff;
				margin: 0 auto;
				border: 1px solid skyblue;
				border-radius: 15px 15px 15px 15px;
			}
			
			.left {
				left: 10px;
				margin: 0 auto;
				height: auto;
				width: auto;
				float: left;
				background-repeat: no-repeat;
			}
			
			.right {
				height: 300px;
				padding-top: 100px;
				position: relative;
			}
			.pp{
				position: absolute;
				bottom: 5px;
				right: 30px;
			}
		</style>
		<link rel="stylesheet" href="素材/jQuery插件/css/bootstrap.min.css">
	</head>

	<body>
		<div class="first">
			<h2>音乐播放器</h2>
		</div>
		<div class="box">
			<div class="left">
				<img src="素材/images/guangpan.gif" alt="">
			</div>
			<div class="right">
				<a href="#" id="aa">歌曲：Gothic Storm - Whisper Of Hope (Main)</a>
				<p id="pp" class="pp">
					<audio src="素材/music/James Blunt - You're Beautiful (Explicit).mp3" controls></audio>
				</p>
			</div>
			<form>
				  <select class="form-control music" id="exampleFormControlSelect1">
				  </select>
			  </form>
		</div>
		<script src="素材/jQuery插件/js/jquery-3.4.1.min.js"></script>
		<script>
			$(function() {
				var arr=["Gothic Storm - Whisper Of Hope (Main)","James Blunt - You're Beautiful (Explicit)","Angetenar (Emre Kabak Remix) - Emre Kabak","Jesus Army f. Tenira Sturm-Thank You (Dj Andrey Sanin Radio Edit)（L.Chen remix） - L.Chen","故乡 - 许巍","遥望 - Beyond","父亲写的散文诗 - 刘乐瑶"]
				$.each(arr,function(index,item){
					$(".music").append('<option>'+item+'</option>')
				})
			})
		
			$(".music").change(function(){
				var src=$(this).val();	
				$("#aa").text("歌曲："+src+"")
				$("#pp").empty();
				$("#pp").append('<audio src="素材/music/'+src+'.mp3" controls></audio>')
			})
		</script>
	</body>

</html>

更多推荐

简易网页音乐播放器