This app is a single-page audio version of youtube. It supports streaming a single video or playlist, streaming a livestream, searching, viewing channels and linking a youtube account. Each video or livestream is converted and streamed back to the client on the fly without anything ever being saved on the server.
React version of youtube-audio.
I wanted to create a version of youtube that functions like spotify.
- Responsive web design that works on any size device
To see a live verion, go to https://audio-youtube-react.herokuapp.com/
Important Note: App is on free version of heroku so it sleeps after 30 mins of inactivity. Therefore, it takes a little while to start up.
Bootstrap wasn't used because I wanted to design it using pure CSS.
- Get the duration(in seconds) of a video from the Youtube Data API
- Calculate the file size in bytes using the duration and bitrate so the server can 'tell' the browser how long the file is (set 'Content-Length' header).
- Set the header(200) of the audio file that is going to be streamed; content-type - audio/mpeg, content-length - file-size and transfer-encoding - chuncked
- Stream the file by converting a audio only stream to a mp3 stream using ffmpeg and then stream that to response.
I built a npm package that is modified version of youtube-audio-stream that is used to convert and stream the audio. More information on that package can be found here
- Install node and ffmpeg
- Install all the packages in the root folder and client folder with
npm install - Get an API token for the Youtube Data API using Google Developers Console
- Create a .env file inside of root folder and place a key value(
API_KEY=token) pair with API token from step above - Run project with
npm run debugor use one of the launch configs if using VSCode