网页实现一个简单的音乐播放器（大佬别看。(⊙﹏⊙)） |
您所在的位置：网站首页 › html简单播放器 › 网页实现一个简单的音乐播放器（大佬别看。(⊙﹏⊙)） |
网页实现一个简单的音乐播放器（大佬别看。(⊙﹏⊙)）
|
今天闲着无事，就想写点东西。然后听了下歌，就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 欢迎 改进 留言。 演示地点跳到演示地点
然后就是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了 你的点赞是我最大的动力。。。萌新前进中。 然后有人说让我写个歌词滚动，额歌词滚动本来想用ajax的，发现了很自己很多不足、附加歌词滚动的链接；https://blog.csdn.net/qq_44210563/article/details/104077613 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 lis[i].onclick =function(){ musicNode.src = musicsrc[i]; musicNode.load(); musicNode.play(); for (var j= 0; j //音乐播放完后自动下一曲 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 return i } } } |
【本文地址】
今日新闻 |
推荐新闻 |