网页音乐播放器 音乐播放器 html+css+js

首先准备工作为jquery,html,css,javascript别的其实并不需要,而且其实JavaScript也不需要。
最初是准备不适用jQuery的,但是发现用jQuery只需要几行代码就能实现的功能,而用原生的JavaScript却需要好多,而且也不容易实现,所以最后才准备使用jQuery了。
jQuery的安装各位应该都会吧,如果不会的话,我放一下代码。
通过使用nodejs来安装,在你的js文件夹里按住shift之后鼠标右键,选择打开powershell窗口,之后只需要输入cnmp install jquery即可亦或者直接去中文站下载也行,这里不多讲述了。
在这里插入图片描述
列表的点击显示和隐藏就是通过jQuery来实现的,很简单,如果使用JavaScript还是那句话,麻烦。
之后文字的打字机效果是通过typed这个库来实现的,github跳转链接
其实这个效果加不加都是无所谓的,只是好看了一丢丢而已,并且其实我css只是随便写了一下,完全可以稍微优化一下css。目前的效果也就是点击列表的歌曲,会自动切换音乐和图像,然后上面的目前播放的名字也会换成该音乐的名字。
这个网页实现音乐播放器的功能很容易,基本上一眼就能看懂了,后期可能会加一些别的效果,并且把样子做一下,搞一下css。
具体详细代码可以跳转一下啊https://zjzdmc.top/rcxx/61.html
网页音乐播放器

//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: '➼'
});
}
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值