Best architecture for music app so that state is preserved between route changes?


I’m building a music app and I want the music to continue to play in between route transitions. The best way I can think to do this is to have a master route that holds the music player and then have all actions that trigger music playing to bubble up to that route.

If you go to soundcloud you can see that they have a bar at the bottom that allows you to control the current track and navigate between tracks. Also, the UI for the playing track gets updated when you hit play/pause etc. In other words, if you see two tracks on screen, one of which is playing, it will have UI that indicates its playing. Then if you pause the player using the bar at the bottom of the screen, the track that is currently playing will update its UI to reflect that it is paused.

This implies that somehow the actions of one route are trickling DOWN to the route that contains the playing element.

What is the architecture here that allows for this? I can only think of very hacky ways to accomplish this


You’ll probably want a “player” type Ember Service to handle the playback and control. Then stick a Component in the application.hbs that displays the “player UI” stuff. You could dig around in the ember weekend source to learn some helpful things I’m sure.