音乐流媒体服务

Question

我有一个用React编写的客户端。另外，在我的Google云端硬盘上，我有一些音乐。我想制作音乐流媒体服务，并在我的Google云端硬盘中不间断地在线播放我的音乐。我很喜欢服务器端编程。你推荐我读什么或做什么来写这样的收音机？

Answer 1

您可以利用<audio>元素回放音频媒体。循环播放媒体的一种方法是创建一个包含对象内媒体资源路径的数组。

在canplay事件<audio>元素调用.play()。在ended事件返回一个解决Promise。

将数组传递到.reduce()，使用已解析的Promise进行初始化。当所有媒体曲目播放完后，请使用.then()重新调用功能。

您还可以使用Boolean标志停止重复调度对相同功能的呼叫，该功能会循环播放所请求媒体资源的媒体播放。

const mediaPlaylist = [{ 
 
    "track": "https://doc-0c-48-docs.googleusercontent.com/docs/securesc/ha0ro937gcuc7l7deffksulhg5h7mbp1/dhtqfqf4pt2b3kmukb3m1bcqjcsgcu8o/1499925600000/15486589845087228196/*/0B30WhR3Lbl-cQ3NFRzBuVk5KN28", 
 
    "title": "Hypnotize U" 
 
}, { 
 
    "track": "https://doc-08-48-docs.googleusercontent.com/docs/securesc/ha0ro937gcuc7l7deffksulhg5h7mbp1/1fk2t6ot905rc6fs7ifil1sag5vr5h22/1499925600000/15486589845087228196/*/0B30WhR3Lbl-cR2JEQ3VvT0dxYzQ?e=download", 
 
    "title": "Rock Star" 
 
}, { 
 
    "track": "https://doc-0c-48-docs.googleusercontent.com/docs/securesc/ha0ro937gcuc7l7deffksulhg5h7mbp1/rmop35nhocd25kroorov3p336f15i9m5/1499925600000/15486589845087228196/*/0B30WhR3Lbl-cU2lsdjVpMTRUcGM?e=download", 
 
    "title": "She Want To Move" 
 
}]; 
 

 
const audio = document.querySelector("audio"); 
 

 
const nowPlaying = audio.nextElementSibling; 
 

 
const mediaTracks = ((promise, { 
 
    track, 
 
    title 
 
    }) => 
 
    promise.then(() => new Promise(resolve => { 
 
    audio.src = track; 
 
    audio.addEventListener("canplay", event => { 
 
     audio.play(); 
 
     nowPlaying.textContent = title; 
 
    }, { 
 
     once: true 
 
    }); 
 
    audio.addEventListener("ended", event => { 
 
     nowPlaying.textContent = ""; 
 
     resolve(); 
 
    }, { 
 
     once: true 
 
    }); 
 
    })) 
 
); 
 

 
let stopMedia = false; 
 

 
const mediaLoop = (playlist = Array()) => 
 
    !stopMedia 
 
    ? playlist.reduce(mediaTracks, Promise.resolve()) 
 
    : Promise.resolve("media loop stopped"); 
 

 
const playMedia =() => 
 
mediaLoop(mediaPlaylist).then(playMedia); 
 

 
playMedia() 
 
.then(message => console.log(message)) 
 
.catch(err => {console.log(err); throw err});

<audio controls></audio>Now playing: <label></label>