音楽ストリーミングサービス

Question

私はReactで書かれたクライアントサイドを持っています。また、Googleドライブには音楽があります。私は音楽ストリーミングサービスを作って、自分の音楽をGoogleドライブからオンラインでノンストップで再生したいと考えています。私はサーバー側のプログラミングではうんざりです。あなたは、そのようなラジオを読むために私に何を勧めますか？

Answer 1

<audio>要素を使用してオーディオメディアを再生できます。ループメディア再生の1つのアプローチは、オブジェクト内のメディアリソースへのパスを含む配列を作成することです。

canplayのイベント<audio>の要素コール.play()です。 endedイベントで解決済みのPromiseを返します。

Promiseで初期化された.reduce()に配列を渡します。すべてのメディアトラックが再生されたときに再び.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>