A Web UI for XBMC, focused on user experience and music
JavaScript CSS HTML Other
Latest commit f0d45a6 Aug 8, 2016 @jez500 committed on GitHub Merge pull request #126 from charky/master
Fix: Issue #59 Play Folder @Charky

readme.md

Chorus

A nice modern Web UI for your Kodi. Browse your Music, Movies or TV Shows from the comfort of your own web browser. You can play media via Kodi or stream it in your browser. Works best with Chrome but plays well with most modern browsers.

Used by the Doghouse Media Team to control the shared office music box (an old pc running Kodi with chorus, plugged into an amp and a nas)

View the changelog

Author

Jeremy Graham mail@jez500.com

Web

Requirements

  • Kodi v12 or 13
  • A modern web browser, this has been developed and tested in Chrome

Installing / Updating

You can download Chorus via the official Kodi repo

  • Kodi > Settings > Services > Web Server > Web Interface > get more
  • Or use the zip in this repo

Enabling

  • Kodi > System > Settings > Services > Webserver
  • tick allow access via http
  • select web interface
  • select chorus
  • you should also enable "Allow remote control by programs on other systems" (under "Remote Control") to get the best performance

Using

Add your music/movies sources and do a full music/video scan in Kodi. Then simply go to the address of the computer running Kodi in your browser (if you are using a port number add that to the url) eg.

  • http://localhost/
  • http://localhost:8080/
  • http://192.168.0.10/ TIP: Get your IP via Kodi > System > System Info

Keybindings

You can use you keyboard to control Kodi while in the web interface:

key function
left arrow move left
right arrow move right
down arrow move down
up arrow move up
backspace back
enter select
c context menu
+ volume up
- volume down
spacebar play/pause
x stop
t toggle subtitles
> next
< previous

Performance

If you have a large library (20000+ songs), some things get a bit sluggish, especially if either client or server are low power (eg. not a pc).

Target Device

Chorus resizes nicely to fit on almost any screen. This is still a work in progress and some functionality is not yet responsive.

Stream music from your Kodi library into your browser

As of version 0.2.0 you can use chorus to control Kodi or use it to stream the music direct to your browser! This is still quite experimental and there are a few minor hiccups to consider:

  • It doesn't want to work with Firefox, possible an issue with HTML5 audio and mp3s. When using Chrome and even Internet Explorer 10 it works great.
  • Seeking works intermittently, I think it might be to do with how much of the song is cached, I have also heard that Gotham might fix this but have not yet tried.
  • It didn't work on my Android Media Player, this could also be caused by the Kodi version/build
  • I Haven't tested it over the internet yet, but works great over a LAN Otherwise it works really well!

How to use this browser streaming

In the top right there are some tabs, two of them are named Kodi and Local, this is how you toggle what player the UI is controlling. In Local mode the colour scheme becomes lighter with a hint of blue, In Kodi mode the colors are the default darker scheme with a touch of orange. When you are in a given mode, actions affect that player, so if you click Play on a track when in Local mode, it will play through the browser, likewise, when in Kodi mode all commands are sent to Kodi. You can also add media to other playlists by clicking the menu buttons (three dots vertical) on most media items.

Video streaming

Video streaming via HTML5 "sort of" works, it really depends on the codec used. An embedded VLC player is also available with better codec support. This looks like the best we can get until Kodi supports transcoding. Look for the "stream" tab on a movie.

Supported Kodi addons

With search integration

Issues, Bugs and Suggestions

Post them here https://github.com/jez500/chorus/issues - mention what version you are using

Under the hood

Chorus uses the following open source libraries, creds to all authors:

  • jQuery
  • backbone
  • underscore
  • bootstrap
  • jquery ui
  • backstretch
  • scrollTo
  • total storage
  • Font awesome
  • Sound Manager 2
  • for all, see lib/enabled

Developers

Compiling

Sass and Grunt are used to compile css and js in the dist folder. To get your environment setup first install Bundler and npm.

  • Install required gems with bundle install --path vendor/bundle
  • Install NodeJs packages with npm install
  • Run grunt npm test

Contributing

If you would like to make this project better I would appreciate any help. Send me your merge requests! A few things that are "nice to haves"

  • Backbone, this is my first project using backbone and I am sure I could be doing some things better (refactor)
  • Addons, Make it work with your favourite addon - I attempted google music but failed even using it via the ui
  • Mobile/Tablet App, I would love to reuse a lot of the code as an app, but dont know how
  • Browser streaming audio playback... maybe you want it to work in firefox?
  • Photo library, I wouldn't use it, but you might!

Donate

Are you a fan of Chorus? You can buy me a beer to say thanks :)

Screenshots

Homepage (now playing)

alt text

Search

alt text

Artists

alt text

alt text

Albums

alt text

alt text

Movies

alt text

alt text