大家好，又见面了，我是你们的朋友全栈君。
开发工具与关键技术：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>
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/149001.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...