Skip to content
Just a functional/framework-less version of an audio player/playlist creator/search interface
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


See it running here!

Just a little reflection on how to write the simple audio player, search interface and playlist creator in a different style, w/o frameworks. I tried to do it a little clojurescript-y, where handlers that are working on the data model are passed down from the app root. Think of the 'playlists' hash as the Om-atom that they pass around. Instead of adding the layer of indirection by swapping on the atom, we just do the data manipulation and call some handlers. That pattern works in such a small app.


npm install

npm run build
# (or npm run watch if you wanna hack)

# in a different terminal window, you can

npm run serve

# which starts a little server on localhost:8888

Reading the Source

start in app.js, then you can start reading smaller components, like the search box. The application state is stored on the window.playlists hash, defined in app.js.

Some components:

  • components/textinput

    creates a text input that calls a function with its value on enter

  • components/player

    takes a track from the queue, creates an audio element and shows the album art

  • components/search

    uses a text box, calls the searchtracks service, re-renders itself when searchtracks returns

  • components/listitem

    takes a map of actions, generates a function that creates list items. This is used to create several different items: search results with 'add to playlist' and 'play now', play lists in the sidebar with show, delete and queue buttons, and tracks in playlists with a 'play' and 'remove' buttons.

At the bottom of the screen, there's toggle component names button, that shows labels indicating where each thing on the screen comes from.


Please don't re-use this code, or try to pass it off as your own. Think up a little learning project to yourself instead :)

You can’t perform that action at this time.