Add a global component visible across different pages?


#1

I would like to add a “global” component that keeps visible across pages. The reason is that I want to show an HTML5 Audio Player component located at the bottom of a page, that stays “alive” and keeps playing (so I can’t add it to page components html) even when navigating between root pages.
Placing this into the app component html doesn’t work as well, because when sliding out the pages on opening the menu, the player show animate together with the page. I guess the “global” component needs to be located inside of the component that holds the pages. Unluckily this ionic component doesn’t support ng-content transclusion :frowning:

How can one accomplish this? Any ideas?


#2

@lujakob Hey, I’m also looking for a way to have a persistent audio player…you ever find a solution for this? How has HTML5 audio behaved in your application, is it worth it over Web Audio or Native?


#3

@lujakob I think I figured this out…try adding your player to your footer in your main app.html, the audio stays alive and does not animate with the page transitions


#4

@tspence Where exactly did you add the ion-footer ? If I put it after inside of I only see it in the side-menu when this is open. If I add it on the same level of and I see it always. I would like to see it only on the pages. I guess this doesn’t work. But anyways, seeing it always is already a good solution (maybe I can hide it somehome when the menu comes out). So thanks for the information. If the Ionic team isn’t going to change the nav component this will be my solution!


#5

I haven’t tried it in production (the story is not implemented yet).
Check out https://github.com/arielfaur/ionic-audio
This will be the solution I’m going to try. The idea is to build a custom component based on the code of the above package. The example works well.


#6

@lujakob The only thing I’ve got in my app.html is my ion-menu, and an ion-footer which I dropped an audio tag to test the audio. I’ve tested the Ionic-audio, and it seems to work everywhere except when I test in Ionic View for IOS, i’ve got inconsistent results. I’ve tested on 5 devices, in Ionic view and I only get sound from 2, the others no sound although it will play via air-play to my appleTV, just no local sound on the device. Have you tested audio in Ionic View? I’ve chatted with Ariel Faur the developer, he hasnt done much device testing for this plugin, so we will be the lab rats for this. Lets keep each other posted we may be able to help each other out with this.


#7

I am not using Ionic View anymore, as it is only a container and I had inconsistency problems at several moments. I can imagine that this might be an Ionic View problem as well. You should build directly to the devices with a USB cable (you have to have the Provisioning profiles and everything set up for this). When I tested on iPhone 5 and 7 it worked well. It also worked on Testflight.

Several people recommended to not using Ionic View. At some point you have to set the appstore provisioning profile etc and use Testflight, so why not now. Then you have the best testing experience.


#8

Thanks for this info! I thought Ionic View was the holy grail for testing, now I see it has its issues. I will look into using Testflight now.


#9

It’s the quickest way with Ionic View. Testflight is part of Apple. The setup of all the provisioning profiles and certificates can be a bit annoying, but if you want to go live one day you have to do it anyways. Once this is set up, it’s all easy going with Testflight. I was a bit hesitant in the beginning as well, as Ionic View is so simple. Good luck.