How can I prevent audio interruptions in javascript when loading other media simultaneously?

Currently, I am in the process of developing a WebGL program that involves changing scenes at specific time intervals. Each scene change requires destroying the previous scene and loading a new one, which includes loading various texture files. Alongside this, there is audio playing continuously throughout the program that should remain uninterrupted during the scene transition.

Although the program functions well overall, I have noticed a slight hiccup in the audio playback just before the new assets finish loading when transitioning to a new scene. Despite the fact that all assets, including the audio files, are relatively small (500k or less), this issue persists.

I am seeking advice on how to prevent this minor interruption during the loading process. Any suggestions or solutions would be greatly appreciated!

Answer №1

The hiccup occurred due to the intense javascript operations when transitioning, leading to interruptions in the audio playback. To address this issue, I successfully resolved it by utilizing the Web Audio API instead of the conventional javascript Audio() object. This adjustment enabled the audio to operate within a separate framework from the program execution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Why is it that when the form is submitted, only half of your React component's props are undefined

Just starting out with React, and I'm hoping this issue isn't too obvious. I've been struggling with it for a while now. When looking at the React Dev Tools in Chrome, all of the form's props are defined and appear as expected, even af ...

unable to connect css file to document

My index.html file is not reading the style.css file for some reason, even though it is linked. I have added the type and checked the path, but still facing issues. Can anyone help troubleshoot this problem? Thank you. https://i.sstatic.net/xxpBV.png htt ...

The attribute 'tableName' is not found within the 'Model' type

Currently in the process of converting a JavaScript code to TypeScript. Previously, I had a class that was functioning correctly in JS class Model { constructor(input, alias) { this.tableName = input; this.alias = alias; } } Howev ...

Confirming user credentials for every page

I am currently working with an HTML page that includes front end PHP for server side scripting. One issue I have encountered is the configuration page, which can be accessed by disabling JavaScript in Mozilla settings. My current validation method relies ...

Executing a script programmatically using an NPM package

I'm in the process of developing a package that relies on an external command tool called plop js. In my package.json, I aim to include a binary that points to an index.js file. "scripts":{ "plop": "plop" }, "bin": { "my-command": "ind ...

How can you determine the location of a point on the perimeter of a regular polygon?

Imagine you have a pentagon, with numbered sides like moving around a clock: https://i.sstatic.net/pWqdFtfg.png Starting from the center of the polygon, how can you calculate the position of a point in these locations (along the edge of the polygon): At ...

Tips on how to dynamically allocate an id value to a jQuery function that retrieves the backgroundImage URL

I have a div with a background image and I am using a jQuery function to retrieve the URL of the background image. var name=image; var url=$("#"+name+"").css("background-image"); console.log(url); <script src="https://cdnjs.cloudflare.com/aj ...

Is the XMLHttpRequest object closed once the response is received?

Attempting to establish a connection with the server using an XMLHttpRequest object to send data intermittently. The process of creating the object and establishing a connection is as follows: var xhr = new XMLHttpRequest(); xhr.open("post", location, tru ...

Modifying CSS files in real-time

I've been attempting to dynamically change the CSS file, but I've run into an issue: Whenever I try to alter the style, it seems to work correctly while in "debug mode", showing that the changes are applied. However, once the JavaScript function ...

Converting a string date format to UTC: A step-by-step guide

In my Typescript code, I am trying to convert a date/time format from string to UTC format but currently facing an issue with it. The desired output is as follows: 2018/10/27+16:00 => 20181027T01000Z import * as moment from 'moment' dates=$ ...

How to Implement a Popup after Validation in ASP.NET

During the registration process, I would like to display a popup to the user. The current code I am using is functioning properly: <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <p>PROC ...

Clicking to rotate causes the model to disappear in OrbitControls.js

I have incorporated OrbitControls.js into my website to enable users to zoom in/out and rotate 3D models. However, I am encountering an issue where clicking anywhere on the page causes the model to disappear and disables the model switching buttons. Previo ...

Directing users to a specific section on another webpage can be accomplished using HTML, JavaScript, or

<nav> <div class='container-fluid'> <h1 class='logo'>Logo</h1> <ul class='list-unstyled naving'> <li><a href='index.html'>Home</a></li> ...

Utilize MongoDB to store information within a sharding cluster and track the duration of data operations

I am looking to save data on a MonogoDB. For this purpose, I have a setup with one mongos, three configserver, and a sharding configuration consisting of two replicasets (each with primary/secondary/arbiter). There are two main issues I am facing: 1) Wha ...

AngularUIRouter state is not being loaded during the initial page loading

Recently, I developed a website that utilizes angular-ui-router to map to multiple views. While most of the functionality is working as expected, there are two issues that I've encountered: When a user navigates to a page without an angular route, t ...

Delete Entries in MongoDB Collection According to Unique User Pairs

I have a collection of messages stored in MongoDB and I need to keep only the latest 500 records for each pair of users. Users are identified by their sentBy and sentTo attributes. /* 1 */ { "_id" : ObjectId("5f1c1b00c62e9b9aafbe1d6c&quo ...

Inquiring about the functionality of vertical and horizontal scrolling in jQuery localscroll

I recently finished building a webpage at . On this page, I have a set of main links along with corresponding sublinks. Currently, clicking on a main link causes the content to scroll vertically, while clicking on a sublink like Blue Inner Link 1 results i ...

The ng-repeat directive is not showing the data retrieved from the HTTP request. It appears as a comment when

My homeController.js var app = angular.module('myApp'); app.controller('HomeController', function($scope, $http, $rootScope, $stateParams, $state, LoginService) { $scope.user = $rootScope.userName; console.log("Starting http reque ...

How can Observables be designed to exhibit both synchronous and asynchronous behavior?

From: Understanding the Contrasts Between Promises and Observables In contrast, a Promise consistently operates asynchronously, while an Observable can function in synchronous or asynchronous manners. This presents the opportunity to manipulate code in ...

What is the process for implementing a fallback image in Material UI?

Hey there! I'm currently looking to customize the fallback image of a Material UI Avatar with my own original image. Does anyone have any tips on how I can achieve this? const fallbackImage = "../../fallback/img.png" const AvatarWithBadge = ...