Oops, there seems to be a duplicate reference found for the provided id. Any suggestions on how to tackle this alert?

I've been working on a music app, and I've encountered an issue when navigating to the sound-playing page, leaving it, and immediately coming back. The error message that pops up is something I haven't been able to find any information on despite searching online. I'm using the cordova media player along with the LowLatencyAudio plugin for my app. Below is the code snippet from the specific page in question, as well as an image showing the error message. Any assistance would be greatly appreciated, as I seem to be at a dead end!

<div class="drum" id="bass" ontouchstart="play('bass');" ontouchend="touchEnd(event);">Bass</div>
    <div class="drum" id="highhat" ontouchstart="play('highhat');" ontouchend="touchEnd(event);">High Hat</div>
    <div class="drum" id="snare" ontouchstart="play('snare');" ontouchend="touchEnd(event);">Snare</div>
    <div class="drum" id="bongo" ontouchstart="play('bongo');" ontouchend="touchEnd(event);">Bongo</div>

<script type="text/javascript">

        var lla;

        function onBodyLoad() {     
            document.addEventListener("deviceready", onDeviceReady, false);
        }

        function onDeviceReady() {
            if( window.plugins && window.plugins.LowLatencyAudio ) {

                lla = window.plugins.LowLatencyAudio;   

                lla.preloadFX('assets/bass.mp3', 'assets/bass.mp3', function(msg){}, function(msg){ alert( 'Error: ' + msg ); });
                lla.preloadFX('assets/snare.mp3', 'assets/snare.mp3', function(msg){}, function(msg){ alert( 'Error: ' + msg ); });
                lla.preloadFX('assets/highhat.mp3', 'assets/highhat.mp3', function(msg){}, function(msg){ alert( 'Error: ' + msg ); });
                lla.preloadFX('assets/bongo.mp3', 'assets/bongo.mp3', function(msg){}, function(msg){ alert( 'Error: ' + msg ); });     
            }
        }

        function play(drum) {
            document.getElementById(drum).className = 'drum touched';
            lla.play('assets/' + drum + '.mp3');
        }

        function touchEnd(event) {
            event.target.className = 'drum';
        }

    </script>


Error: A reference already exists for the audio id.
javascriptandroidcordova

Answer №1

There seems to be a problem with lla.preloadFX being called multiple times for the same asset. Upon reviewing the plugin documentation and examining the java code, I have determined that this issue is more of a warning or notice rather than an error. To address this, I have adjusted my example to demonstrate how you can disregard this message without impacting your application.

Consider the following code snippet:

function onDeviceReady() {
   if( window.plugins && window.plugins.LowLatencyAudio) {

       lla = window.plugins.LowLatencyAudio;

       lla.preloadFX('assets/bass.mp3', 'assets/bass.mp3', function(msg){}, function(msg){ if(msg != 'A reference already exists for the specified audio id.') { alert( 'Error: ' + msg ); } });
   }
}

By using this revised code snippet, any legitimate errors will still trigger an error notification, while the message regarding the duplicate loading of resources will be disregarded. This approach should effectively resolve the issue at hand.

Answer №2

When the deviceready event is triggered, the function lla.preloadFX is called to load assets for the Application. However, if you use preloadFx(), it will attempt to reload assets that are already loaded. To handle unloading of assets on application exit, simply manage the backbutton event.

function onBodyLoad() {     
                document.addEventListener("backbutton", onBackButton, false);
            }
       function onBackButton() {
    var assets=['bass','snare','highhat','bongo'];
                for (x in assets) {
                    lla.unload(assets[x], function (msg) {}, function (msg) {});
                }
                navigator.app.exitApp();
            }

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

JavaScript code designed specifically for Chrome browser that enables dragging functionality for div elements, unfortunately, it does not function on Firefox

Do you have a moment to help me with a small issue? I created a script that allows you to change the position of a div by dragging it. The script works perfectly in Chrome, but unfortunately, it's not working when I try it in Firefox. var h = windo ...

javascripthtmlcsscross-browser

Sending form submission data with useFormik via React Router's Link component is a common task in web development. By

My goal is to transfer form data generated through the useFormik and yup hooks to another component using React Router DOM's 'Link' feature. However, I have encountered two issues in this process. Issue 1: I am struggling to pass the useFor ...

javascriptreactjsreact-router-domformik-material-ui

Unlocking the Power of Typescript and ReactJS: Maximizing Efficiency with Previous State

I'm encountering difficulties implementing the previous state in React 18 with Typescript version 4.8.3. Here is my refreshToken code and I'm receiving the following error: Value of type '(prev: any) => any' has no properties in c ...

javascriptreactjstypescript

Switching a component in Mui App transforms the entire aesthetic

I'm currently working on a project using Mui and the Material Kit theme. While I initially tried to customize the default components provided by Material Kit using custom CSS, I found that I was unable to override the styles as expected. Consequently, ...

javascriptreactjsmaterial-ui

Tips for generating and invoking a promise within NodeJS

I have been attempting to access Firestore using a function I created that includes a collection variable. var fetchDataFromFirestore = function(collection, doc){ return promise = new Promise(function(resolve,reject){ //If doc param is null Quer ...

javascriptnode.jsfirebasepromisegoogle-cloud-firestore

Whenever I attempt to include state in a React class that is declared as a constant, I consistently encounter the error message: "TypeError:

Apologies for the redundancy, but as a newcomer to React, I previously inquired about a similar issue and have since modified my code. My current challenge involves trying to access a state value within a const React class. Below is the excerpt from my Ar ...

javascriptreactjs

What is the process for including a checkbox at the beginning of each row in a React-virtualized table?

I have been utilizing the react-virtualized library to render a Table, with an intended appearance as follows: Desired Table Layout My progress so far has led me to this representation: Current Table Display https://i.sstatic.net/6VFbp.png I have succ ...

javascriptreactjsreact-virtualized

Is there a way to utilize the reset() function within an input form?

Is there a way to automatically reset the textbox when submitting a value? Below is my code: <!DOCTYPE html> <html> <body> <ul id="myList"> </ul> <input type="text" id="myText" value="&q ...

javascripthtmlcss

Tutorial on wrapping HTML content in a CDATA tag using jQuery

Is there a way to enclose some HTML in an element using a CDATA tag to "sterilize" it, so to speak? I've attempted to do so using the following code: $(this).html( "<![CDATA[" + $(this).html() + "]]>" ); However, this approach simply encodes ...

javascriptjqueryhtmlcdatahtml-sanitizing

Strategies for updating text within a DIV element without an ID, solely relying on a class attribute, by utilizing JavaScript injected into a WKWebView

I've encountered an issue while attempting to update the text within a DIV tag using JavaScript. The tag only has a class attribute, not an ID. I've attempted the following code: document.getElementByClassName('theClassName').innerHTML ...

javascripthtmlswiftwkwebview

The onClick event in React/NextJS is not functioning properly when applied to an external component

One dilemma I am facing involves my main page and a button component that I have created to be reused throughout my project. Strangely, when I add the onClick event to the external component, the click event does not seem to work. However, if I create the ...

javascriptreactjsnext.js

The lack of synchronization between the updated state in one function and its counterpart is causing discrepancies, resulting in the incorrect information being sent to the API

Whenever I press the following button: <Button onClick={(e) => { addToCard(item); handleprisma(); }} > add to cart </Button> This function is meant to add the item to my shopping cart: const addToCard = (item) => { co ...

javascriptreactjsnext.js

Issue with Ant Design form validation

After reading through the documentation, I attempted to implement the code provided: Here is a basic example: import { Button, Form, Input } from "antd"; export default function App() { const [form] = Form.useForm(); return ( <Form f ...

javascriptreactjstypescriptvalidationantd

Ordering two arrays in a for loop

I have two arrays to manage, one for numbers and the other for names. const number = ['91xxxx','1xxxx','92xxxx'] const name = ['Abhi','Arun','Aaron'] The goal is to pair each number with a corres ...

javascriptnode.js

Tips for updating HashMap values once EditText editing is finished in an Android app using TextWatcher

I have a situation where I need to handle multiple LinearLayouts with EditTexts that implement TextWatcher. When a value is entered, it is immediately added to a hashmap. However, I want to wait and add the complete value after finishing editing. Here is ...

javaandroidtextwatcher

A guide on utilizing jQuery to increase the value of an index

When the server returns JSON in this format: "games": [{ "gameType": "RPG", "publishers": [{ "publisher": "Square", "titles": [{ "title": "Final Fantasy", "gameReleases": [ 2006, 2008, 2010, 2012, 2013, 2014 ...

javascriptjqueryhtmljson

Navigating to lower levels of JSON data in JavaScript instead of starting with the top level

Using a microservice, I fetch multiple sets of JSON data and display them on a Vue.js-powered page. The structure of the data is as follows: {"data":{"getcompanies": [ {"id":6,"name":"Arena","addr ...

javascriptjsonjavascript-objects

The database already contains a table named 'users' in MySQL

CREATE TABLE weeki.members ( id INT(11) NOT NULL AUTO_INCREMENT, username VARCHAR(255) NOT NULL, name VARCHAR(50) NOT NULL, email VARCHAR(255) NOT NULL, password VARCHAR(255) NOT NULL, registration_id TEXT DEFAULT NULL, api TEXT ...

phpandroidmysql

How can I prevent clicks on child links using the :not() selector?

I am working on a script using JQuery where I want to add a click handler to a div while ignoring clicks on the children a tags within it. You can check out my attempt (which is not working as expected) on this JSFiddle link: http://jsfiddle.net/q15s25Lx/ ...

javascriptjquery

Vue: setInterval not updating timer variable

Here is my code for updating and displaying the number of elapsed seconds: <template> <div> {{timerValue}} </div> </template> <script> export default { name: "App", components: { }, da ...

javascriptvue.jsvuejs3