https://github.com/headwinds/loomradio
a streaming radio player with metadata and google search built on react-player
https://github.com/headwinds/loomradio
Last synced: 10 months ago
JSON representation
a streaming radio player with metadata and google search built on react-player
- Host: GitHub
- URL: https://github.com/headwinds/loomradio
- Owner: headwinds
- Created: 2019-06-23T19:20:27.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:55:17.000Z (over 3 years ago)
- Last Synced: 2025-04-12T05:52:37.449Z (about 1 year ago)
- Language: JavaScript
- Homepage: loomradio.vercel.app
- Size: 4.22 MB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Loom Radio
After discovering [React-Player](https://cookpete.com/react-player/), I wanted to strip it down to play shoutcast streams so that I could stream and switch between my favourite radio stations [bassdrive](http://www.basedrive.com) and [cbc radio](https://www.cbc.ca/radio/includes/stream.html).
I wanted to make React Player easy to deploy with [now](https://zeit.co/now) and thus ported it into a simple create react app so I wouldn't have to worry about webpack config. I added [icecast-parse](https://www.npmjs.com/package/icecast-parser) so that I could see the current show title. Then I thought it would be nice to throw that title into a google search.
[loomradio.now.sh](https://loomradio.now.sh/)
#### Getting Started
```
yarn
yarn start
```
#### Styles
see styles > LoomRadio.css
#### Google Search
sign up for a free [google search](https://developers.google.com/custom-search/v1/overview) API which gives 100 searches per day.
find src > config_sample.js and rename it to config.js - add your google API key to this file.
## Pusher
I want to see who is connected to various channels and track usage over time. While I'd prefer to use Socket.io, I couldn't find a decent way to install it on Zeit and didn't want to host with Heroku so I used the [Pusher](https://www.pusher.com) service instead to create the socket as a service.
#### Deply to Zeit
```
now
```
#### CBC Radio Schedules
Since the stream meta is not available, could I scrape the schedules instead and display the show based on the current time?
https://www.cbc.ca/m/touch/pg-r1.html
TODO - Create a beautiful soup service
#### Credit
* [Create React App](https://github.com/facebook/create-react-app)
* [React-Player](https://cookpete.com/react-player/)
* [icecast-parse](https://www.npmjs.com/package/icecast-parser)
* [google search](https://developers.google.com/custom-search/v1/overview)
* [loom](https://www.eurogamer.net/articles/2015-04-26-remembering-loom-the-game-designed-to-be-completed)
* [observable music viz](https://observablehq.com/@alandelip/music-viz)