项目介绍
基于 React、TypeScript 和 Vite 构建的小型音乐网页播放器。
主要功能
播放/暂停
切换播放
调节音量
文字闪烁
功能细节
播放/暂停:可使用
空格按键
进行播放/暂停切换上一首:①可切换到上一首播放的歌曲;②若没有上一首歌曲(如初始进入网页)则显示黯淡灰色,鼠标悬浮会提示无法点击
切换下一首:①可随机播放下一首歌曲
调节音量:①调节滑轨,进行音量大小控制;②点击📣图标直接静音/取消静音
主页展示
项目启动
终端
cd
到项目根目录,依次输入npm install
、npm run dev
终端将响应输出一个本地服务器的地址,类似于
http://localhost:7777
,使用浏览器进入该地址即可
关于其他
音乐列表
在音乐文件夹
/public/music
内增添音乐文件同时修改音乐列表
/src/musicList.ts
部署到服务器(Linux系统 & Docker方式)
将项目文件上传至服务器
在服务器项目所在目录添加文件
Dockerfile
# 使用 Node.js 18 的镜像进行构建 FROM node:18-alpine AS build # 设置工作目录 WORKDIR /app # 将 package.json 和 package-lock.json 复制到工作目录 COPY package*.json ./ # 使用国内镜像源并安装依赖,增加超时时间 RUN npm config set registry https://registry.npmmirror.com && npm install --timeout=60000 # 将项目代码复制到工作目录 COPY . . # 构建项目 RUN npm run build # 使用 nginx 提供服务 FROM nginx:alpine COPY --from=build /app/dist /usr/share/nginx/html # 暴露 80 端口 EXPOSE 80 # 容器启动时运行 nginx CMD ["nginx", "-g", "daemon off;"]
终端中
cd
到项目所在目录输入
docker build -t 1-1-radio .
(用于构建 Docker 镜像,它会根据当前目录(或指定的路径)下的Dockerfile
文件来创建镜像。)运行完成后输入
docker run -d -p 7777:80 --restart always 1-1-radio
(根据Docker镜像生成一个新的容器实例,并配置运行环境)
部署到网站
如果部署到网站后播放卡顿,解决方式如下
将音乐文件迁移到服务器其他目录:比如
/var/www/music
将旧容器停止并销毁:输入
docker stop <container_id>
,运行完成后输入docker rm <container_id>
重新构建Docker镜像:输入
docker build --no-cache -t 1-1-radio .
将宿主机的
/var/www/music
挂载到Docker容器中:输入docker run -d -p 7777:80 -v /var/www/music:/app/public/music --restart always 1-1-radio
在反向代理配置中添加代码块
location /music/ { alias /var/www/music/; access_log off; expires 1d; }