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

2020 年 11 月 24 日

332次浏览

3812字数

首先准备工作为jquery,html,css,javascript别的其实并不需要，而且其实JavaScript也不需要。
最初是准备不适用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>

/* 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也是没什么难度的，自己看一眼就好了。

如果有什么不懂的可以在评论区评论，我会在看到的第一时间回复的。

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

Datehoer • 2020 年 11 月 24 日

//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>

/* 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();

css代码没什么难度吧，应该，就是简单的浮动定位效果，把列表给浮动过去，然后html也是没什么难度的，自己看一眼就好了。

如果有什么不懂的可以在评论区评论，我会在看到的第一时间回复的。

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

发表评论取消回复

安装Docker Desktop报错WSL 2 installation is incomplete

python3网络爬虫开发实战pdf

Css :host是什么？

Cheat Engine教程8 多级指针(升级版)个的文件，之后关闭教程重新打开进行扫描(重新打

我的世界紫禁之巅纯净生存服务器

typecho joe console面板报错

python 查ip获取地址 ipv4 ipv6免费查询接口

个人博客网站推荐

python 爬虫之获取标题和链接

Cheat Engine教程4 浮点数