Music Streaming Service

I've got a client-side written in React. Also, on my Google Drive I've got some music. I want to make a music streaming service and play my music online and non-stop from my Google

Solution 1:

You can utilize <audio> element to playback audio media. One approach to loop media playback would be to create an array containing path to media resources within an object.

At canplay event of <audio> element call .play(). At ended event return a resolved Promise.

Pass the array to .reduce() initialized with a resolved Promise. Use .then() to call function again when all media tracks have played.

You can also use a Boolean flag to stop repeated scheduling of call to same function which loops media playback of requested media resources.

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(() =>newPromise(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;

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

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

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

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