|
|
网页实现一个简单的音乐播放器今天闲着无事，就想写点东西。然后听了下歌，就打算写个播放器。
于是乎用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
}
}
} |
----------------------------
原文链接:https://blog.csdn.net/qq_44210563/article/details/102826406
程序猿的技术大观园：www.javathinker.net
[这个贴子最后由 sunshine 在 2020-01-13 12:23:24 重新编辑]
|
|
Java技术网站 → 『 Java开发技术 』 → 『 操作系统、网络架构和数据库专题 』 → HTML5+JavaScript实现一个简单的音乐播放器
消息
查看
搜索
好友
邮件
复制
引用
IP: 已设置保密
