3

I have a multi-paged web app, in which users may go to a different page during an ongoing process. For example a user may be at /home and he may click a link to /dashboard while, say some music is being played through an <audio> tag. How can I allow the user to make the transit without pausing that audio? Kind of a smooth transition...

On the internet, I found that smoothState.js may be of help but I have little idea about how should I implement it with my react-apps made using create-react-app.

Thanks

ankit
  • 31
  • 2

1 Answers1

0

If you are doing a page load, then the ongoing process will be paused. This means that you will need to have a single page, and by visiting other "pages" you would change the content of the page, but will leave your audio intact. You can do this via defining a main content of your page that will not be changed when you click on buttons to see different views and defining a custom content section of your markup that will be replaced when different contents are needed.

Now, if you enable URL rewriting, you can ensure that you only have an index page, which can receive some parameters which would show which content to initialize with at first load and /home or /dashboard would be rewritten under the hood into your main URL in a parameterized manner.

You can achieve this using libraries as well, but this is the main thing to achieve.

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
  • I am new to this, so can you be a little more specific about which libraries to use... – ankit Jul 18 '20 at 17:24
  • @ankit you do not necessarily need to use libraries. AJAX request support is built in to Javascript. You will need to read on 1. AJAX request sending 2. Callbacks 3. DOM manipulation and once you have read enough about these topics you will be able to solve your problem. – Lajos Arpad Jul 19 '20 at 09:10