音樂流媒體服務

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>