React全Hook项目实战在线聊天室历程（三）：加个音乐直播？

前情提要：

React全Hook项目实战在线聊天室历程（一）：基本功能
React全Hook项目实战在线聊天室历程（二）：引用与话题功能

正文

聊天应该有什么？背景音乐，茶与酒，零食，后两个我是没法实现了，但是我们可以给我们的在线聊天室加一个背景音乐的功能。

初步设想就是写好一堆音乐的外链在前端，然后让它自动播放，但是这样没有背景音乐的感觉，因为大家听到的歌都不一样呀。

那么能不能做一个“直播”呢，让大家听到的是同一首歌，同一个进度？

通过查阅资料，我大概找到两个方法，一个是用RTMP协议+ffmpeg推流，前端再接收。第二个方法是让后端把音乐文件切成一段一段加好头部信息再通过WebSocket传给前端，前端拿到后直接播放。这里加头部信息的方法参考了这位大佬的博客blob语音流 前端播放。

两个方法都有一个弊端就是，很烧流量而且对服务器的负担很大，耗钱。而且第二个方法还有一个问题我没想明白就是，该间隔多久发送一段数据，如果有知道的朋友希望再评论区里告诉我。

所以想想就找个投机取巧的方法：在服务端列好歌单，歌单包括歌曲时长以及歌曲的URL，然后服务端跑一个计时器，通过这个计时器来计算当前歌曲进度，然后到时间了就通过WebSocket广播歌曲信息和进度。前端一进来的时候会首先收到歌曲信息和进度，然后把URL放进<audio>，设置好currentTime再自动播放就好了。

服务端：

// ws.js
// 放了音乐的配置文件
/* ...... */
var radio_config = require("../upload/music/config.json");
var process_s = 0; // 进度（秒）
var song_index = 0; // 歌曲索引
/* ...... */
// 计算播放进度
function calcRadioProcess() {
   
    setInterval(() => {
   
        if (process_s > radio_config[song_index].duration) {
   
            song_index = song_index + 1 >= radio_config.length ? 0 : song_index + 1
            process_s = 0
            console.log("切歌", radio_config[song_index])
            bc(clientList, JSON.stringify({
   
                type: 'song',
                song: radio_config[song_index],
                current: 0
            }))
        } else {
   
            process_s +=