Can an mp3 continue playing from where it left off when you switch to another page on the same site? I'm feeling lost and not sure how to tackle this. Still learning HTML, CSS, etc. Any thoughts or tips would be greatly appreciated. Thank you!
Can an mp3 continue playing from where it left off when you switch to another page on the same site? I'm feeling lost and not sure how to tackle this. Still learning HTML, CSS, etc. Any thoughts or tips would be greatly appreciated. Thank you!
It is not possible to have audio play across multiple page loads. However, you can create a single page that plays audio and provides navigation for the user within that same page. There are a few options for structuring this:
Personally, I would recommend the first option, but both approaches can be effective.
Refreshing the entire page to reload the audio source will always result in a noticeable gap during playback due to load times, especially on slow internet connections.
Instead of reloading the page, consider these options:
Create a Single Page App:
Construct a single page application that loads once and then dynamically updates content using AJAX when the user navigates. This way, the audio component remains constant without interruptions.
Use an Additional Tab/Popup/Window:
Implement an additional tab, popup window, or separate window dedicated solely to playing the audio. Take inspiration from German radio station "radioeins," which provides a popup for their live stream while allowing users to browse the site seamlessly. However, this approach is not ideal due to potential UX issues and browser pop-up blockers.
Consider Using iframes:
You could embed your main page content within an iframe or place the audio inside an iframe. Despite some drawbacks, this method can be an alternative solution.
Avoid Frames:
Although frames offer a similar concept to iframes, they are deprecated and should not be used for modern web development.
In Summary
If possible, opt for a single page application; otherwise, use a popup-based solution instead.
Within this TypeScript snippet, there is a variable called moreinfo that is initially set to 1. In the constructor, however, the value of moreinfo is changed to 2. Subsequently, based on whether the value is 1 or 2, different div elements are displayed usi ...
I have Firebug (my team lacks Firefox) and the IE developer toolbar (IE7), but I'm struggling to easily validate if the referenced files in a page are loading. I see Javascript errors, but they don't lead me directly to the exact file in the hier ...
I recently created an AngularJS application and integrated a REST API to fetch resources for the app. As part of the authentication process, I store the user's access token in a cookie. When the user reloads the page, I need to retrieve user informati ...
I recently integrated the react-native-login-screen package into my React Native project. Below is the code snippet that I used: import React, { Component } from "react"; import { Text, StyleSheet, View, Button, TouchableOpacity } from "reac ...
I have a Progressive Web App where I use the getUserMedia() API to access the camera and HTML audio tags for handling media content. However, ever since updating to iOS 17, I've faced an issue where audio plays through the earpiece instead of the medi ...
Although the title may seem odd, I'll explain what I'm attempting to accomplish. I have a login form with two input fields, a checkbox, and a submit button. You can view a screenshot of it here: https://i.sstatic.net/nE1FY.png The terms of use a ...
While working on a tabbed control with mobile-angular-ui (), I encountered an issue when trying to generate the tabs dynamically. Initially, everything looked good with the following code: <ul class="nav nav-tabs" ui-state='activeTab' ui-def ...
Here is a button: <button ng-click="deleteCompany(company.id)" class="btn btn-danger" onClick="return window.confirm('This will permanently delete the entity\n Are you sure you want to delete this post?'); "> <s ...
After cloning a project that I finished 2 months ago, I am facing an issue where nodemon won't run. Despite trying to close npm using task manager on Windows and running it again, the error persists. I am also utilizing MongoDB as my database. If any ...
I am trying to make each "card" of a WordPress plugin clickable on my website. I have inserted a Pure JS element with the following code: document.getElementsByClassName('fc_card-container').onclick = function() {alert('It works!');} ...
Currently, I am utilizing the Bootstrap 4 color picker library which can be found at this link: In my code, I have defined color pickers that look like this: <div class="input-group cpicker"> <input type="text" class="form-control input-lg" ...
Struggling to resize images on my webpage as they are displayed in full size. Utilizing Bootstrap 4 carousel component but experiencing non-responsive images. .carousel-item { width: 100%; height: auto; object-fit: cover; } The code for the ...
I am currently utilizing VueJs in the development of a Shopify theme using Shopify Cli and Store 2.0. To incorporate Vue, I initially attempted to install it through a CDN script within my theme.liquid file. <script src="{{ 'vue.global.js&apos ...
I am looking to create a column that is centered on the page, with another column slightly offset from it, without affecting the center alignment. <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="styl ...
When looking at the default app.js file generated by express.js, I came across the following line: ... app.use(app.router); ... This particular line of code has left me perplexed for a couple of reasons. First, upon consulting the express api documentati ...
Currently, I am in the process of creating a gallery and I would like the images to open on top of everything in their original size when clicked by the user. My expertise lies in HTML and CSS at the moment, but I am open to learning JavaScript and jQuery ...
I am facing an issue with rendering all the returns from the API in my Next.js application. The API, which is created in Strapi, is only displaying 1 out of the 3 possible returns. I am a beginner when it comes to using APIs and I suspect that the issue li ...
I possess a hefty 10MB JSON file with a structured layout comprising 10k entries: { entry_1: { description: "...", offset: "...", value: "...", fields: { field_1: { offset: "...", description: "...", ...
Currently working on developing my own custom Wordpress theme and everything is going well, except for one little detail. I am trying to customize the styling of my next/previous page links so that the next page-link appears on the right side and the previ ...
Currently in the process of deploying my application on Firebase by following a tutorial. I encountered an issue after executing the command npm install -g firebase-tools: npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" d ...