克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

在线播放音乐盒(PC 端)


☁️ 项目演示地址:http://175.178.71.181:9000/

项目说明 💻

  • 项目名称:♫ DDOnlinePlayer
  • 项目简介:基于 React 框架开发的在线音乐播放器,实现歌曲的搜索播放、分享与下载、歌词与进度条同步显示,以及热门推荐榜单。
  • 技 术 栈:React、React-Router、React-Redux、Axios
  • UI组件库:Ant Design
  • 技术描述:
    1. 采用 Python 的 Flask 框架开发后端 RESTful API 接口,提供数据源
    2. 将项目中页面中的相关配置进行抽离,对代码进行解偶,提高代码的可维护性
    3. 通过重写 Ant Design 组件库的样式,实现个性化的统一风格UI 界面
    4. 使用 Axios 网络请求库设置全局请求拦截器,对网络异常进行统一处理
    5. 使用HTML5的 dowmload 新属性,和将外链转化为内链两者相结合的形式实现跨域下载资源文件

项目结构 🌲

├── music_box
│   ├── node_modules
│   ├── public
│   ├── src
|   |   ├── assets             // 静态资源
|   |   ├── common             // 公共配置
|   |   ├── components         // 自定义组件
|   |   ├── pages
|   |   ├── router
|   |   ├── services
|   |   ├── store              // 状态管理
|   |   └── utils
|   |   ├── index.js
│   ├── craco.config.js
│   ├── package.json
│   ├── yarn.lock
│   ├── README.md              // 项目文档

项目功能 ✨

  • 歌曲推荐
  • 歌曲搜索
  • 歌曲下载❕
  • 歌曲分享
  • 歌曲播放和歌词显示
  • 进度条和音量控制
  • 播放模式选项
  • 歌曲榜单
  • 历史记录

问题记录 🤔

1. 歌曲下载

在HTML5的 a标签 中新增了 dowmload 属性 ,可实现文件的下载并重命名。但由于 a标签 存在跨域问题,需通过将外链地址转化成内链的方式,才能实现在播放器的当前页面进行下载。详见:Web 文件下载和 A 标签的使用

源码如下:

const loadDownSong = (musicId, musicName) => {
  if (musicId == undefined) return false;

  getSongSource(musicId).then(res => {
    const songUrl = res?.url?.data?.url ?? "";
    if (songUrl) {
      fetch(songUrl)
      .then(response => response.blob())
      .then(blob => {
        const objectURL = window.URL.createObjectURL(blob);
        const newA = document.createElement('a');
        newA.href = objectURL;
        newA.download = musicName;
        newA.click();
        window.URL.revokeObjectURL(objectURL);
      });
      message.info("已在后台开启下载", 1);
    } else {
      message.info("未知该歌曲源地址", 1);
    }
  });
}

部分效果 🔥

播放器首页

播放器首页 (一)

播放器搜索

播放器搜索 (二)

播放效果图

播放器播放 (三)

外链分享

播放器外链 (四)

歌曲信息

播放器歌曲信息 (五)

播放列表

播放器播放列表 (六)

歌曲下载

播放器下载 (七)

免责声明 👊

本项目的部分资源、UI 设计以及软件仅用于个人学习开发测试,勿用于商业及非法用途,如产生法律纠纷与本人无关。

如此项目造成侵权损失,请联系本人删除:2361954836@qq.com

MIT License Copyright (c) 2022 shaodong-wu Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

React,React-Router,React-Redux,Axios,在线音乐播放器,基于 React 开发的在线音乐播放器 展开 收起
JavaScript 等 3 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化