最近在尝试做个音乐播放器,以前后端分离的方式实现,主要的技术栈是springboot + vue + mysql
音频数据在数据库中的存储方式是blob,关于什么事blob数据,大家可以参考这篇文章JS中Blob数据的介绍
/**
* 上传音乐文件
* @param musicData 前端发送的 MultipartFile 类型的文件数据
* @param fileName 文件名
* @return
*/
@PostMapping(value = "/uploadMusic", consumes = "multipart/form-data")
public Result uploadMusic(
@RequestParam(value = "musicData") MultipartFile musicData,
@RequestParam(value = "fileName") String fileName,
@RequestParam(value = "singer") String singer
){
boolean flag = false;
if(!musicData.isEmpty()){
flag = service.uploadMusic(musicData, fileName, singer);
}
return flag ? Result.success(true) : Result.fail("操作失败!");
}
/**
* 上传音乐文件到数据库
* @param musicData 音乐数据
* @param fileName 文件名
* @return 上传结果
*/
@Override
public boolean uploadMusic(MultipartFile musicData, String fileName, String singer) {
try {
Song song = new Song();
// 获取文件类型名称
String fileType = musicData.getOriginalFilename().split("\\.")[1];
byte [] data = musicData.getBytes();
String fileNameWithType = fileName + '.' + fileType;
song.setFileName(fileNameWithType);
song.setSinger(singer);
song.setFileData(data);
String format = LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"));
song.setUploadTime(format);
int insert = songMapper.insert(song);
if (insert != 1){
return false;
}
} catch (IOException e) {
e.printStackTrace();
}
return true;
}
在vue中获取字节数据并将数据类型转换成blob类型,转换成浏览器audio标签可播放的方式
responseType: 'blob',
timeout: 120000
})
.then(res => {
if (res.status === 200) {
try {
// 获取到后台返回的结果 res.data 这还是压缩了的
const musicData = res.data
// 将byte数组转换成Blob对象 并从响应中获取数据类型
const blob = new Blob([musicData], { type: res.data.type })
// 将Blob对象转换成URL对象
const url = URL.createObjectURL(blob)
// 将url返回
this.audioURL = url
} catch (err) {
console.log('解压或数据出问题了!')
console.log(err)
}
}