站点美化之音乐播放器
大约 2 分钟
站点美化之音乐播放器
音乐播放器组件
音乐播放器组件 NavMusic.vue
从 https://blog.mo7.cc/ 拷贝而来
音乐列表配置
思路:将资源存放在 nginx 服务器中,通过请求获取资源并展示播放。
通过 axios 获取下图 json 配置文件,再获取 nginx 资源服务器获取对应音源。
在 nginx 服务器中创建音乐资源文件夹 public/music
在 public/music
创建 list.json
文件,写入音源信息,包括音源名称、音源歌手名称、音源地址、音源封面、音源歌词文件(lrc)。
[
{
"name": "想自由",
"artist": "Yoga.林宥嘉",
"url": "//shattersoul.com/music/想自由-Yoga.林宥嘉/audio.mp3",
"cover": "//shattersoul.com/music/想自由-Yoga.林宥嘉/cover.webp",
"lrc": "//shattersoul.com/music/想自由-Yoga.林宥嘉/lyrics.lrc"
},
{
"name": "泡沫",
"artist": "G.E.M.邓紫棋",
"url": "//shattersoul.com/music/泡沫-G.E.M.邓紫棋/audio.mp3",
"cover": "//shattersoul.com/music/泡沫-G.E.M.邓紫棋/cover.webp",
"xxlrc": "//shattersoul.com/music/泡沫-G.E.M.邓紫棋/lyrics.lrc"
}
]
通过 nginx 配置来访问音源
server {
listen 80;
listen [::]:80;
server_name _;
# 项目地址
root /var/lib/jenkins/workspace/vuepress/;
include /etc/nginx/default.d/*.conf;
# 配置音源地址
location /music {
# 跨域,本地项目启动访问服务器会出现跨域
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
# 当项目路由带/music 时就会访问 /public/music 地址
alias /public/music;
}
error_page 404 /404.html;
location = /404.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
设置音源文件列表展示的配置项
http {
# 开启文件列表展示
autoindex on;
autoindex_exact_size off;
autoindex_localtime on;
# 中文乱码问题
charset utf-8;
server {
...
}
}
总结遇到的问题
- 怎么将音源文件列表设置到 80 端口?
- 原本思路是设置到 82 端口的,但是遇到了跨域的问题,当时想省事就转到 80 端口,再配置一个 location 解决
- 如何开启文件列表展示?
- 如上配置
- 如何解决中文乱码问题?
- 如上配置
- 如何解决跨域问题?
- 本地 localhost:9527 去访问 shattersoul.com 存在跨域问题,如上配置解决