网页设计音乐播放器_简洁的音乐播放器

网页设计音乐播放器_简洁的音乐播放器今天闲着无事,就想写点东西。然后听了下歌,就打算写个播放器。于是乎用h5audio的加上js简单的播放器完工了。演示地点演示html代码如下` music 这个年纪 七月的风 音乐 `然后就是css`*{ margin:0; padding:0; text-decoration:none; list-…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

今天闲着无事,就想写点东西。然后听了下歌,就打算写个播放器。
于是乎用h5 audio的加上js简单的播放器完工了。
欢迎 改进 留言。
演示地点跳到演示地点

在这里插入图片描述

html代码如下`<!DOCTYPE html> <html> <head> <title>music</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="music.css"> </head> <body> <div id = love> <audio src="" controls class="music"></audio> <ul class="mlist"> <li class="">这个年纪</li> <li>七月的风</li> <li>音乐</li> </ul> </div> <script type="text/javascript" src="music.js"></script> </body> </html>`

然后就是css`

*{ 
   
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style: none;
}
#love{ 
   
	position: relative;
	height: 250px;
	width: 300px;
	border: 3px solid black;
	border-radius: 10%;
	background-image: url(demo.jpg);
	background-size: cover;
	
}
.play{ 
   
	color: white;
	background-color: #87CEFA;
	margin:0 6px;
}
#love .mlist{ 
   
	margin:10px;
	background-color: rgba(1,1,1,0.5);
	height: 165px;
	border-radius: 5px;

}
#love ul li{ 
   
	line-height:30px;
	text-align: center;
	cursor:pointer;	
	border-radius: 4px;
}
#love ul li:hover{ 
   
	line-height:45px;
	text-align: center;
	cursor:pointer;
	margin:0 5px;
	background-color: #F0F8FF;
	border-radius:6px;
}

`下面就是js了
你的点赞是我最大的动力。。。萌新前进中。

var musicNode = document.getElementsByClassName('music')[0];
var     mlist = document.getElementsByClassName('mlist')[0];
var       lis = document.getElementsByTagName('li');
var       len = lis.length;
var  musicsrc =[ ];//这个数组用来放歌单的url。详情可以看我的网页demo
musicNode.src = musicsrc[0];
for (var i = 0; i < len; i++) { 
//单击改变playmusic
(function(i){ 

lis[i].onclick =function(){ 
        
musicNode.src = musicsrc[i];
musicNode.load();
musicNode.play();
for (var j= 0; j < len; j++) { 

lis[j].className = '';
}
this.className = 'play';
}})(i);
}
musicNode.onended =function(){ 
//音乐播放完后自动下一曲
var ended = getPlay();
if (ended == len-1) { 
//若为最后一曲则放第一曲
musicNode.src = musicsrc[0];
lis[0].className = 'play'
lis[ended].className = '';
musicNode.load();
musicNode.play(); 
}else{ 
 
musicNode.src = musicsrc[ended + 1];
lis[ended + 1].className = 'play';
lis[ended].className = '';
musicNode.load();
musicNode.play(); }
}
function getPlay(){ 
//获取正在播放music的li
for (var i = 0; i < len; i++) { 

if (lis[i].getAttribute('class') == 'play') { 

return i
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/182597.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Php公众号40029,微信公众平台开发:出现40029 code无效

    Php公众号40029,微信公众平台开发:出现40029 code无效本人写了一段用户授权的代码,出现错误:40029不合法的oauth_code问题。上网找了答案说是调用了两次请求,发回的code相同,所以失效。但是就是不知道为什么,我会发出两次请求。请求授权代码:deflogin(request):user=request.session.get(‘wx_user’,default=None)#如果用户之前没有关注ifuserisNone:ur…

  • 用GDB调试程序(一)

    用GDB调试程序(一)

    2021年12月10日
  • MODIS数据下载[通俗易懂]

    MODIS数据下载[通俗易懂]Modis数据下载示例

  • adb操作命令详解及大全

    adb操作命令详解及大全adb是什么?:adb的全称为AndroidDebugBridge,就是起到调试桥的作用。通过adb我们可以在Eclipse中方面通过DDMS来调试Android程序,说白了就是debug工具。adb的工作方式比较特殊,采用监听SocketTCP5554等端口的方式让ID

  • Cocos creator 微信小游戏排行榜「建议收藏」

    Cocos creator 微信小游戏排行榜「建议收藏」Cocoscreator版本:2.0.10主域动态刷新子域首先得知道主域和子域的关系,需要让子域(开放域)里的排行榜信息动态刷新在主域的页面中,需要在主域中的节点上挂载WXSubContextView组件。子域中,可以添加Widget组件、滚动的节点来实现上下或者左右滑动。这里主要记录排行榜的实现。(这里只实现了同玩好友排行榜的功能,同玩群好友可以另实现)实现排行榜步骤一:需要实现…

    2022年10月27日
  • linux 日期转换时间戳_oracle日期转13位时间戳

    linux 日期转换时间戳_oracle日期转13位时间戳1.用时间戳显示当前时间:date+%s#date+%s16145919602.将时间戳转换成日期时间:date-d@1614591901#date-d@16145919012021年03月01日星期一17:45:01CST3.转换指定日期为时间戳:2021-03-0117:49:23#date-d’2021-03-0117:49:23’+%s16145921634.指定日期格式转换:date-d@1614592163 +”…

发表回复

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

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