音乐播放器_音乐播放器项目介绍-CSDN博客

本文链接：https://blog.csdn.net/qq15035899256/article/details/126691618

文章目录

一、项目简介
二、普通用户
三、创作用户
四、数据库
五、Tomcat 实现 HTTPS 访问
六、展示效果
七、待优化

提示：以下是本篇文章正文内容，Java系列学习将会持续更新

一、项目简介

一款网页版的音乐播放器，主页展示多种专辑，每种专辑中可以有多首音乐，实现了音乐播放、暂停、上一曲、下一曲等基本功能；并且支持用户登录功能，登录后的用户可以作为创作者进行。

开发环境：IDEA、Maven、JDK 1.8、MySQL
相关技术：Spring Boot、JSON、Ajax、Session、BCrypt 加密、MediaStream 媒体流

项目主要分为3个模块：

普通用户：可以免登录使用，直接在主页听音乐，但是无法上传音乐；
创作用户：经过注册/登录后的用户，有个人中心页面，可以上传本地音乐、录制音频、新建专辑、专辑绑定音乐、发布/下线专辑等功能；
前端设计：实现了主页、个人中心、播放器控制面板等页面，还通过 JavaScript 访问连接媒体输入、输出设备；

回到目录…

二、普通用户

功能：不需要登录，直接在主页听音乐。

流程：

在搜索框键入 URL，Ajax 发送 GET 请求，请求专辑的JSON 数据。

window.addEventListener('load', function () {
  let xhr = new XMLHttpRequest()
  xhr.open('get', '/album-list.json')
  xhr.addEventListener('load', function () {
    console.log(this.responseText)
    let data = JSON.parse(this.responseText)
    render(data.albumList)
  })
  xhr.send()
})

收到 GET 请求的动态资源，从数据库中获取信息，再以 JSON 格式发回前端。

@GetMapping("/album-list.json")
@ResponseBody
public AlbumListView list() {
	List<AlbumWithUserDo> doList = albumRepo.selectListAllWithUser();
	AlbumListView view = new AlbumListView();
	view.albumList = new ArrayList<>();
	for (AlbumWithUserDo albumWithUserDo : doList) {
		AlbumView albumView = new AlbumView(albumWithUserDo);
		view.albumList.add(albumView);
	}
	return view;
}

收到数据的前端，做 SQL 拼接，并进行 CSS 布局。
可以选择专辑播放。

专辑播放的流程：

Ⅰ. 先通过 a标签跳转到 /play.html?aid=i 的页面。

<div class="title"><a href="/play.html?aid=${album.aid}">${album.title}</a></div>

Ⅱ. 再通过 Ajxj 发送 GET 请求，获取专辑中的音乐数据。

let xhr = new XMLHttpRequest()
  xhr.open('get', '/album.json?aid=' + aid)
  xhr.addEventListener('load', function () {
  console.log(this.responseText)
  let data = JSON.parse(this.responseText)
  render(data)
})
xhr.send()

Ⅲ. 获取到的 JSON数据是列表，其中包含 n 首音乐，根据索引选择播放。

let track = album.trackList[index]

回到目录…

三、创作用户

功能：实现个人中心页面 studio ，其功能包括：

user 用户的注册、登录、退出。
技术栈： Session 会话机制、BCrypt 加密
album 专辑的新建、管理 (绑定音乐、发布、下线)。
track 音乐的录制、文件上传、列表展示。

文件上传：form 表单发送 POST 请求，设置 enctype 的属性

<form method="post" action="./upload.do" enctype="multipart/form-data">
	<input type="text" name="title" placeholder="title">
	<input type="file" name="content" placeholder="content">
	<button>上传</button>
</form>

后端将 .mp3 文件转为二进制流，存入数据库中。

// 参数: MultipartFile content
InputStream is = content.getInputStream();
trackRepo.insert1(user.uid, title, type, is);

音乐录制：

<input type="text" name="title" id="title" placeholder="title">
<div class="controls">
	<button id="authorize">授权</button>
	<!-- disabled: 禁用 input 元素 -->
	<button id="start" disabled>开始录制</button>
	<button id="stop" disabled>停止录制</button>
	<button id="upload" disabled>上传</button>
</div>
<!-- controls 属性规定浏览器应该为音频提供播放控件 -->
<audio disabled controls></audio>

详细操作可以看我之前发布的一篇文章：WebAPI之访问连接媒体输入设备

回到目录…

四、数据库

我们使用的数据库是 MySQL 。
我们在学习过 Spring 后，我们为了代码的便洁，不再采用传统的 JDBC 操作，而是引入了 MyBatis ，直接使用 @Mapper 注解就可以方便的操作数据库。

users 用户表： password 是通过 BCrypt 加密后的暗文。
在这里插入图片描述

tracks 歌曲表： content 是二进制文件。插入数据前要设置 MySQL 默认的max_allowed_packet变量值为最大。
在这里插入图片描述

albums 专辑表： cover 存储图片URL，state 表示专辑状态 (发布=2)
在这里插入图片描述

relations 关系表： 存储 专辑aid 和 歌曲tid 的关系。
在这里插入图片描述

回到目录…

五、Tomcat 实现 HTTPS 访问

这个是让 tomcat 支持 https，否则项目的录制会被浏览器禁止。

添加域名解析
申请证书
上传证书
修改 server 端口

可以参考别人的详细教程：

Spring 项目： 在自己的 tomcat 中做配置

51CTO 博客：https://blog.51cto.com/guoxh/2103315
博客园：https://www.cnblogs.com/54chensongxia/p/13754839.html

keytool -genkeypair -alias "tomcat" -keyalg "RSA" -keystore "tomcat.keystore"

SpringBoot 项目： 内置了 tomcat，在 application.yml 中配置

SpringBoot配置Https：https://blog.csdn.net/Nicholas_GUB/article/details/121232873
springboot配置https访问：https://blog.csdn.net/m0_54853420/article/details/124422790

回到目录…

六、展示效果

访问地址： https://1.15.76.95:8021/

主页： 没有专辑时
在这里插入图片描述
主页： 有专辑时

播放音乐：

创作中心：

上传音乐：

专辑管理： 新建、绑定音乐、发布、下线

录制歌曲：

回到目录…

七、待优化

不足:

功能方面，易用性不好 (分页 / 查找…)
如果SQL慢，可以考虑引入索引(index)
音频文件保存在数据库中，性能很差，实际不应该这么做。
之所以这么做，主要是基于学习角度，演示 InputStream / OutputStream 二进制的响应。

拓展项:

功能：普通用户也要注册 / 登录，添加收藏功能和收听历史
数据：音频在专辑中的排序(按照创建顺序排序，能不能由up主指定顺序)
AOP 统一事务管理：检验登录态
保存成文件：
使用COS存储文件，然后数据库里记录文件的URL：https://cloud.tencent.com/document/product/436/38484
在腾讯云控制台中，选择云产品 > 对象存储，进入 COS 控制台，按照界面提示开通 COS 服务，创建存储桶。

回到目录…

总结:
提示：这里对文章进行总结：
以上就是今天的学习内容，该项目是一款网页版的音乐播放器，主页展示多种专辑，每种专辑中可以有多首音乐，实现了音乐播放、暂停、上一曲、下一曲等基本功能；并且支持用户登录作为创作者。之后的学习内容将持续更新！！！