【Max】带你从零开发之网站音乐播放器

无名

我不会IAPP，不会机器人，我不教大家那些仅能玩乐的东西，但我可以教大家从零开始学习编程技术。[呼~]

跟着我走，你也可以成为正式的软件工程师！但学习是枯燥且乏味的，需要恒心！！！[神经病]

今天教大家为自己的网站增加一个音乐播放器，而且是非常炫酷的音乐播放器。基本没有任何难度即可实现
【本音乐播放器也可以在手机端使用】

项目准备：
        ①：电脑一台（没有电脑的可以先看看吧，但如果想成为专业的开发人员，必须得有，不经历5W行的代码，不能称作为开发人员）
        ②：Viscua Studio Code，开发所用的工具
        ③：aplayer github

本帖隐藏的内容需要【资源会员】才可浏览，您需要升级才可浏览，点击这里升级【资源会员】

本次开发所使用的开源代码

开发过程：
        1.新建一个index.html，引入aplayer.js与aplayer.css
       
   
       
2.创建一个容器
       
       
3.初始化aplayer，本次我们就使用官方自带的音乐即可
        打开官方页面，按F12，查看Network,可以找到官方的音乐地址，直接复制过来就行。
        例如：

本帖隐藏的内容需要【资源会员】才可浏览，您需要升级才可浏览，点击这里升级【资源会员】

4.先创建一个保存的数组musics，代码太多看图就行,  之后渲染aplayer即可
        const ap = new APlayer({
        container: document.getElementById('aplayer'),
        audio: musics
    });

5.使用最简单的当前样子就行，这样就可以在自己的网站拥有一个最简单的音乐播放器了。看图

6.太大了不好看？？aplayer有自带的吸底模式，很简单，只需要在配置上使用fixed：true即可，如下
        const ap = new APlayer({
        container: document.getElementById('aplayer'),
                fixed: true,
        audio: musics
    });
教程到此结束。

当前，本次的内容是最简单的，可以说丝毫没有难度的，音乐也是本地的音乐，样式也是默认的样式，但也足够用了。
如果反响不错，我会考虑后期出根据自己的网易云音乐获取音乐的教程，也会出其他类似的等等。
       
        示例地址：

本帖隐藏的内容需要【资源会员】才可浏览，您需要升级才可浏览，点击这里升级【资源会员】

        代码地址：

本帖隐藏的内容需要【资源会员】才可浏览，您需要升级才可浏览，点击这里升级【资源会员】