最初是准备不适用jQuery的,但是发现用jQuery只需要几行代码就能实现的功能,而用原生的JavaScript却需要好多,而且也不容易实现,所以最后才准备使用jQuery了。
jQuery的安装各位应该都会吧,如果不会的话,我放一下代码。
通过使用nodejs来安装,在你的js文件夹里按住shift之后鼠标右键,选择打开powershell窗口,之后只需要输入cnmp install jquery即可亦或者直接去中文站下载也行,这里不多讲述了。

列表的点击显示和隐藏就是通过jQuery来实现的,很简单,如果使用JavaScript还是那句话,麻烦。
之后文字的打字机效果是通过typed这个库来实现的,github跳转链接
其实这个效果加不加都是无所谓的,只是好看了一丢丢而已,并且其实我css只是随便写了一下,完全可以稍微优化一下css。目前的效果也就是点击列表的歌曲,会自动切换音乐和图像,然后上面的目前播放的名字也会换成该音乐的名字。
这个网页实现音乐播放器的功能很容易,基本上一眼就能看懂了,后期可能会加一些别的效果,并且把样子做一下,搞一下css。
上下代码,然后进行一些简单的讲解吧。
//js,名字我是叫的music.js
// 记录图片和音乐以及正在播放的名字var mslists = ['./music/jar_of_love.mp3', './music/see_you_again.mp3', './music/sunshine_in_the_rain.mp3'];var imglists = ['http://p1.music.126.net/8jt2KnGDF0qMP9JbidOtVA==/573945069746475.jpg', 'http://p2.music.126.net/JIc9X91OSH-7fUZqVfQXAQ==/7731765766799133.jpg', 'http://p1.music.126.net/bHQlt-zzDQlsnPydiYKsHw==/109951165124500529.jpg'];var namelists = ["Jar of love", 'See you again', 'Sunshine in the rain'];// 点击隐藏和显示$(".liebiao").click(function() {if ($(".msxulie").is(":hidden")) {$(".msxulie").show();} else {$(".msxulie").hide();}});// 文字效果window.onload = function() {var typed = new Typed(".zzbf", {strings: ['', '音乐播放器正在播放:'],startDelay: 300,typeSpeed: 100,loop: true,backSpeed: 50,showCursor: true,cursorChar: '➼'});}// 点击切换音乐$(".jol").click(function() {$(".mscontrol").attr("src", mslists[0]);$(".msimg").attr("src", imglists[0]);$(".msplayingtext").html(namelists[0]);$(".mscontrol")[0].play();// suoyin = 0;// wenzixiaoguo(suoyin);});$(".sya").click(function() {$(".mscontrol").attr("src", mslists[1]);$(".msimg").attr("src", imglists[1]);$(".msplayingtext").html(namelists[1]);$(".mscontrol")[0].play();// suoyin = 1;// wenzixiaoguo(suoyin);});$(".sitr").click(function() {$(".mscontrol").attr("src", mslists[2]);$(".msimg").attr("src", imglists[2]);$(".msplayingtext").html(namelists[2]);$(".mscontrol")[0].play();// suoyin = 2;// wenzixiaoguo(suoyin);});
<!-- html代码,这个的名字是无所谓的 -->
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/index.css"></head><body><div class="msplayer"><img class="msimg" src="http://p1.music.126.net/8jt2KnGDF0qMP9JbidOtVA==/573945069746475.jpg" alt="音乐图片"><audio controls="controls" class="mscontrol"><source src="./music/jar_of_love.mp3"></audio><input type="button" value="列表" class="liebiao"><div class="msxulie"><ul><li class="sya">See you again</li><li class="jol">Jar of love</li><li class="sitr">Sunshine in the rain</li></ul></div><div class="msplaying"><span class="zzbf"></span><span class="msplayingtext">Jar of love</span></div></div><script src="./js/node_modules/jquery/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script><script src="./js/music.js"></script></body></html>
具体代码就是上面的这些了,比较需要注意的就是js里面的那个记录图片,音乐以及名字的那三个数组,如果文件是储存在本地的话,记得他们的位置是相对于那个html文件的,而不是js文件,所以记得修改一下,我之前就是相对于js文件所以一直报错,哈哈。然后再就是那个音乐播放的效果,不能更改里面的source的src值,因为更改了这个不会让页面重新读取数据,而应该修改外面的audio的src值,这个是我百度查了好久没看到,然后自己测试的时候误打误撞出来的,然后在就是点击列表里的音乐名字,就会切歌,这个实现其实还是很容易的/* css代码,这个我是叫的index.css */
/* 播放器位置 */.msplayer {float: left;background-color: aqua;border-radius: 20%;}/* 播放器图片 */.msplayer .msimg {margin-top: 5px;margin-left: 5px;margin-bottom: 5px;width: 60px;height: 60px;border-radius: 50%;}/* 播放器控制器 */.msplayer .mscontrol {margin-top: 5px;margin-left: 5px;margin-right: 5px;width: 200px;}/* 播放器列表按钮 */.msplayer .liebiao {position: relative;bottom: 25px;}/* 音乐列表 */.msplayer .msxulie{text-align: center;width: 315.14px;position: absolute;display: block;background-color: bisque;top: 20px;left: 315.14px;border-radius: 20%;cursor: pointer;}/* 正在播放 */.msplaying {position: absolute;top: 0px;left: 80px;font-size: 10px;}
$(".mscontrol").attr("src",mslists[0]);$(".msimg").attr("src",imglists[0]);$(".msplayingtext").html(namelists[0]);$(".mscontrol")[0].play();
第一行是获取audio的src值,把他设置为我们数组里的值,第二行是更改图片,第三行是修改名字,最后一行其实加不加无所谓的,就是一个自动播放效果,如果换歌就进行自动播放。然后我那两行注释是修改那个typed的效果的,但是发现函数执行了就很难停止,所以就给注释掉了,效果也是很容易的,就是将那个typed效果创建成一个函数,之后调用即可,然后在里面设置一个变量用于接受我们传递的参数就好了,不过目前来说不会怎么停止已经运行的函数,所以这个想法就搁浅了。
css代码没什么难度吧,应该,就是简单的浮动定位效果,把列表给浮动过去,然后html也是没什么难度的,自己看一眼就好了。
如果有什么不懂的可以在评论区评论,我会在看到的第一时间回复的。
css代码没什么难度吧,应该,就是简单的浮动定位效果,把列表给浮动过去,然后html也是没什么难度的,自己看一眼就好了。
如果有什么不懂的可以在评论区评论,我会在看到的第一时间回复的。