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

**URL:** <https://discuss.emberjs.com/t/best-architecture-for-music-app-so-that-state-is-preserved-between-route-changes/12306>\
**Category:** Ember CLI\
**Created:** [January 24, 2017, 12:01am UTC](https://discuss.emberjs.com/t/best-architecture-for-music-app-so-that-state-is-preserved-between-route-changes/12306 "2017-01-24T00:01:19Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![gattra](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/gattra/32/12352_2.png) [@gattra](https://discuss.emberjs.com/u/gattra)\
**Post date:** [January 24, 2017, 12:01am UTC](https://discuss.emberjs.com/t/best-architecture-for-music-app-so-that-state-is-preserved-between-route-changes/12306/1 "2017-01-24T00:01:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Panman8201](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/panman8201/32/17727_2.png) [@Panman8201](https://discuss.emberjs.com/u/Panman8201)\
**Post date:** [January 24, 2017, 1:30pm UTC](https://discuss.emberjs.com/t/best-architecture-for-music-app-so-that-state-is-preserved-between-route-changes/12306/2 "2017-01-24T13:30:49Z")

</div>

You’ll probably want a “player” type [Ember Service](https://guides.emberjs.com/v2.10.0/applications/services/) 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](https://github.com/ember-weekend/ember-weekend/blob/master/app/services/player.js) to learn some helpful things I’m sure.