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

网页设计音乐播放器_简洁的音乐播放器今天闲着无事,就想写点东西。然后听了下歌,就打算写个播放器。于是乎用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)


相关推荐

  • APP应用平台有哪些?

    APP应用平台有哪些?1、小米应用商店小米开放平台网站:https://account.xiaomi.com注册帐号教程地址:http://dev.xiaomi.com/doc/?p=90应用提交流程:http://dev.xiaomi.com/doc/?p=1292、360手机助手360开放平台地址:http://i.360.cn/注册及应用提交流程教程地址:http:…

  • 解决Please make sure you have the correct access rights and the repository exists 问题.

    解决Please make sure you have the correct access rights and the repository exists 问题.问题:Pleasemakesureyouhavethecorrectaccessrightsandtherepositoryexists请确保您具有正确的访问权限并且存储库存在原因:公钥出问题了,需要删除.ssh下文件,然后重设置用户名和邮箱再重新生成ssh公钥即可解决解决:步骤一:删除.ssh下所有所有文件步骤二:1.设置用户名gitconfig–globaluser.name‘zhandehu…

  • ubuntu的ssh连不上_ubuntu网络连接没有显示出来

    ubuntu的ssh连不上_ubuntu网络连接没有显示出来之前发在其他的博客上的,现在移动以下位置之前的链接:http://blog.chinaunix.net/uid-69944074-id-5831708.html(原创文章)使用Ubuntu,经常需要需要SSH远程连接,但是有时候会出现问题,难以捉摸,下面参考别人的,在结合自己的尝试总结下吧。服务器配完ubuntu系统以及LNMP环境以后,想用WINSCP远程登录,就需要开启SSH服务才能支持。SSH服务分为客户端和服务器。顾名思义,我想用putty远程登录Ubuntu服务器,所以需要安装SSH s

  • 处理Mac 下 Python selenium webdriver 无法上传图片

    处理Mac 下 Python selenium webdriver 无法上传图片

  • eclipse怎么导入java文件_Eclipse如何导入JAVA工程?如何将项目导入Eclipse中?

    eclipse怎么导入java文件_Eclipse如何导入JAVA工程?如何将项目导入Eclipse中?Eclipse如何导入JAVA工程?很多用户在学习Eclipse的过程中都会不小心把项目给删除了,到这里,笔者要先说一下“没关系,先不要慌张”,如果你把项目删除了,是可以通过导入的方法找回来的。具体方法见下文。Eclipse如何导入JAVA工程?1、在电脑桌面找到Eclipse快捷方式。2、双击打开Eclipse,在弹出的“WorkspsceLauncher”对话框中,点击后面的“Browse”…

  • 【13】进大厂必须掌握的面试题-配置管理面试

    Q1。配置管理流程的目标是什么? 配置管理(CM)的目的是通过使开发或部署过程可控和可重复,从而创建更高质量的产品或系统,来确保产品或系统在其整个生命周期中的完整性。CM流程允许对…

    2020年10月21日

发表回复

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

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