网页实现一个简单的音乐播放器（大佬别看。(⊙﹏⊙)）

今天闲着无事，就想写点东西。然后听了下歌，就打算写个播放器。
于是乎用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了
你的点赞是我最大的动力。。。萌新前进中。

然后有人说让我写个歌词滚动，额
歌词滚动本来想用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。详情可以看我的网页demomusicNode.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的lifor (var i = 0; i < len; i++) {if (lis[i].getAttribute('class') == 'play') {return i}}
}

网页实现一个简单的音乐播放器（大佬别看。(⊙﹏⊙)）相关推荐

自制一个简单的音乐播放器
这两天刚学完了contentprovider和service组件,就综合下所学的,自制了一个简单的音乐播放器. 代码如下: 主activity代码 public class MainActivity ...
用Qt写一个简单的音乐播放器（三）：增加界面（播放跳转与音量控制）
一.前言在用Qt写一个简单的音乐播放器(一):使用QMediaPlayer播放音乐中,我们已经知道如何去使用QMediaPlayer播放音乐. 在用Qt写一个简单的音乐播放器(二):增加界面(开始和 ...
用Qt写一个简单的音乐播放器（六）：显示歌词（正则表达式）
一.前言在用Qt写一个简单的音乐播放器(一):使用QMediaPlayer播放音乐中,我们已经知道如何去使用QMediaPlayer播放音乐. 在用Qt写一个简单的音乐播放器(二):增加界面(开始和 ...
用Qt写一个简单的音乐播放器（一）：使用QMediaPlayer播放音乐
一.前言 QMediaplayer可以用于解析音频文件和视频文件,继承自QMediaObject,涉及到的对象为QMediaContent.QMediaObject可以提供关于媒体内容的接入,通过UR ...
用Qt写一个简单的音乐播放器（五）：歌曲播放时间显示
一.前言在用Qt写一个简单的音乐播放器(一):使用QMediaPlayer播放音乐中,我们已经知道如何去使用QMediaPlayer播放音乐. 在用Qt写一个简单的音乐播放器(二):增加界面(开始和 ...
Android开发做一个简单的音乐播放器
Android开发如何做一个简单的音乐播放器,首先我们先要知道用到的知识点有哪些. 1.MediaPlayer:可以播放本地资源.sd卡内存资源以及网络uri资源,在这里我们播放sd卡上的音乐资源. ...
用Qt写一个简单的音乐播放器（七）：界面美化（QSS样式表）
一.前言在用Qt写一个简单的音乐播放器(一):使用QMediaPlayer播放音乐中,我们已经知道如何去使用QMediaPlayer播放音乐. 在用Qt写一个简单的音乐播放器(二):增加界面(开始和 ...
用Qt写一个简单的音乐播放器（四）：歌曲浏览、上一曲、下一曲
一.前言在用Qt写一个简单的音乐播放器(一):使用QMediaPlayer播放音乐中,我们已经知道如何去使用QMediaPlayer播放音乐. 在用Qt写一个简单的音乐播放器(二):增加界面(开始和 ...
Android 一个简单的音乐播放器
前言: 这次算是第三次自己做音乐播放器了,一次比一次进步一些啦.不过感觉还是太简陋了,哈哈.技术差... 效果图: 电脑配置比较差,所以模拟器有些卡,效果图也看到有些卡顿. App主要就是分两部分:数 ...
用C/C++写一个简单的音乐播放器（基于windows控制台编程）
学习内容:1. 使用单例模式设计,让加载资源唯一化. 2. 控件管理. 3. 按键消息处理 4. 音频函数的使用 1. 资源管理与加载 1.1 公共头文件将用到的头文件保存到一个公共头文件" ...

网页实现一个简单的音乐播放器（大佬别看。(⊙﹏⊙)）

网页实现一个简单的音乐播放器（大佬别看。(⊙﹏⊙)）相关推荐

最新文章

热门文章