|
|
|
|
# Mix Youtube videos like a pro DJ!
|
|
|
|
|
|
|
|
|
|
## About
|
|
|
|
|
This website is a tribute to the old twoyoutubevideosandamotherfuckingcrossfader.com.
|
|
|
|
|
It's a simple way to play music from Youtube and smoothly fade between tracks thanks to the crossfader.
|
|
|
|
|
|
|
|
|
|
## What's next?
|
|
|
|
|
### Maybe one day
|
|
|
|
|
- ~~Search videos straight from the app (needs API key and calls)~~
|
|
|
|
|
- Compatibility with Bandcamp music (not sure if it can be done without too much hacks)
|
|
|
|
|
- A playlist of to-be-played tracks that can be added manually ("add url") or through the search
|
|
|
|
|
- A history of played tracks?
|
|
|
|
|
### Should be done quickly
|
|
|
|
|
- Clean code (especially old P5JS)
|
|
|
|
|
- Sanitize it (naming, organization, comments...)
|
|
|
|
|
- Add current tracks/playlists as hashes in the URL so we can share track combinations
|
|
|
|
|
- Better indication of the video current status (playing or paused),maybe using `outline` on the iframe, or changing the `box-shadow color`?
|
|
|
|
|
|
|
|
|
|
## External resources and inspiration
|
|
|
|
|
### Inspiration
|
|
|
|
|
- Original idea: http://twoyoutubevideosandamotherfuckingcrossfader.com/
|
|
|
|
|
- Youtube embedded player API implementation: https://thomaspark.co/projects/needledrop/
|
|
|
|
|
- Starry night: https://www.youtube.com/watch?v=NJjEGoqTn1Y
|
|
|
|
|
- CSS/JS shooting stars: https://www.geeksforgeeks.org/how-to-create-shooting-star-animation-effect-using-css/
|
|
|
|
|
### Bandcamp fetching
|
|
|
|
|
- https://gist.github.com/Romern/cd7f1e9a742d27eb3ac104201f6ae87c
|
|
|
|
|
- https://stackoverflow.com/questions/65085046/how-do-i-pull-album-art-thumbnail-from-bandcamp
|
|
|
|
|
- https://github.com/89z/mech/blob/master/bandcamp/bandcamp.go
|
|
|
|
|
- https://github.com/openwhyd/openwhyd/blob/master/app/controllers/api/bandcampExtractor.js
|
|
|
|
|
- https://github.com/ytdl-org/youtube-dl/blob/master/youtube_dl/extractor/bandcamp.py
|
|
|
|
|
- https://github.com/masterT/bandcamp-scraper
|
