简易网页音乐播放器

简易网页音乐播放器简易网页音乐播放器开发工具与关键技术:DW2021jQueryHTML5撰写时间:2021年5月28日简介与要点:在网页上制作一个音乐播放器我们仅需用到一个新的标签<audiosrc=”素材音乐”controls></audio>;因为我们这个音乐播放不是单曲循环的使用还要…

大家好,又见面了,我是你们的朋友全栈君。

开发工具与关键技术: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账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号