【Max】带你从零开发之网站音乐播放器
我不会IAPP，不会机器人，我不教大家那些仅能玩乐的东西，但我可以教大家从零开始学习编程技术。[呼~]跟着我走，你也可以成为正式的软件工程师！但学习是枯燥且乏味的，需要恒心！！！[神经病]
今天教大家为自己的网站增加一个音乐播放器，而且是非常炫酷的音乐播放器。基本没有任何难度即可实现
【本音乐播放器也可以在手机端使用】
项目准备：
①：电脑一台（没有电脑的可以先看看吧，但如果想成为专业的开发人员，必须得有，不经历5W行的代码，不能称作为开发人员）
②：Viscua Studio Code，开发所用的工具
③：aplayer github https://github.com/MoePlayer/APlayer 本次开发所使用的开源代码
开发过程：
1.新建一个index.html，引入aplayer.js与aplayer.css
2.创建一个容器
3.初始化aplayer，本次我们就使用官方自带的音乐即可
打开官方页面，按F12，查看Network,可以找到官方的音乐地址，直接复制过来就行。
例如：https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3
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
});
教程到此结束。
当前，本次的内容是最简单的，可以说丝毫没有难度的，音乐也是本地的音乐，样式也是默认的样式，但也足够用了。
如果反响不错，我会考虑后期出根据自己的网易云音乐获取音乐的教程，也会出其他类似的等等。
示例地址：https://cdn.lixingyong.com/hlx/aplayer/index.html
代码地址：https://cdn.lixingyong.com/hlx/aplayer/demo.txt
http://cdn.u1.huluxia.com/g3/M01/01/34/wKgBOV6FW0eARUHPAABCtmbeQpk263.jpghttp://cdn.u1.huluxia.com/g3/M01/01/34/wKgBOV6FW0eAYN7hAAHsfyZ-8cg495.jpghttp://cdn.u1.huluxia.com/g3/M01/01/34/wKgBOV6FW0iAONFCAADyf3pO1XA468.jpghttp://cdn.u1.huluxia.com/g3/M01/01/34/wKgBOV6FW0iAMLDtAADO0wsG5oQ665.jpghttp://cdn.u1.huluxia.com/g3/M01/01/34/wKgBOV6FW0mAWgfFAABhYASKp8g283.jpg
页:
[1]