Playing sound files on Angular using Howler.JS

I am currently trying to incorporate the ability to play an mp3 file within a Cordova + Ionic hybrid app.

The sound file is located at:

www/sounds/dubstep/sound.mp3

I am attempting to play the file from a service placed in /www/scripts/services/global.js using the following code:

var sound = new Howl({
     src: ['sounds/dubstep/sound.mp3'],
     onend: function() {
         console.log('Finished!');
     },
     onloaderror: function() {
        console.log('Error!');
    },
});

sound.play();

However, I keep encountering an onloaderror.

Can anyone provide guidance on how I should correctly set the path?

Thank you for any assistance.

javascriptangularjscordovaaudiohowler.js

Answer №1

As outlined in the documentation on GitHub, it is recommended to utilize the urls property instead of src:

var sound = new Howl({
    urls: ['sounds/dubstep/sound.mp3'],
    onend: function() {
        console.log('Finished!');
    },
    onloaderror: function() {
        console.log('Error!');
    },
});

Source: https://github.com/goldfire/howler.js/

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

Troubleshooting Issue with Angular Property Binding for Image Dimensions

Currently, I am exploring property binding in Angular through an example. The idea is to use an image and bind its width, height, and src attributes using property binding. Surprisingly, even though there are no errors and the image renders successfully vi ...

javascripthtmlangularproperty-binding

Shift content from side to side with a click

I've been attempting to shift content left and right using an onclick event and I need it to stop at the margins on the left or right. The list-items are generated dynamically. Here's the code I've tried so far, but it's not quite worki ...

javascriptjqueryhtmlonclick

Uncovering the Mystery Behind the Repetitive Execution of useEffect in Next.js

I am working on a Time Tracking feature for my Next.js application. In the ./app/components/TimeTracking.tsx file, I have implemented the following component: 'use client'; import React, { useEffect, useState } from 'react'; import { u ...

javascriptreactjsnext.jsreact-hooks

Clear previous loop data in PHP

I have a "show recent" pictures div on my website that I want to refresh every 20 seconds to display a new picture. However, the issue is that my current ajax call refreshes instantly instead of after 20 seconds and it fails to delete the previous data, re ...

phpjavascriptajax

Using the filter function in JavaScript to retrieve specific data

When the user_id from two different data sources matches, I need to return the email from the first source. The first source is a table in PostgreSQL called "results" and the second source is JSON data. I attempted this code snippet: var table = db.query ...

javascriptnode.jsfilter

Modifying the maximum value of a number field attribute in jQuery after a successful action

As I continue to learn jQuery, I encountered a situation with the following form: <form class="simple-checkout" enctype="multipart/form-data" method="POST" action="<?php echo admin_url('admin-ajax.php'); ?>"> <input type="hidd ...

javascriptphpjqueryajaxwordpress

The console experienced a forced reflow when a tooltip appeared on the slider handle while executing JavaScript

I am currently facing an issue with my web page that includes various elements along with the Ant.design slider. The values of the slider are being controlled through React states. However, I have noticed that when the slider tooltip is enabled, the respon ...

javascriptreactjsantdjquery-ui-tooltip

Whenever I implement JavaScript validation on my HTML page, it causes the page to become un

Whenever I try to enter more than 30 to 40 characters in the password input field on my HTML page, all web browsers become unresponsive. This issue persists even if I modify the minimum length and other requirements to 50. I am new to JavaScript. <!D ...

javascripthtml

Issues encountered while trying to integrate chessboard.js into a Vue application

I am facing an issue while trying to incorporate chessboard.js into my jetstream-vue application. Following the creation of the project, I executed the command npm install @chrisoakman/chessboardjs which successfully downloaded the package into my node_mod ...

javascriptvue.jsnpmchessboard.js

VueD3tree successfully fetches data, however, it is not being displayed on the screen

Just started delving into Vue and VueD3tree. Attempting to display a tree using the vued3tree library with data pulled from an API. Strangely enough, when trying with static data, the tree displays perfectly fine. However, when fetching data dynamically, a ...

javascripthtmljsonvue.jsvue-component

In the world of coding, the trio of javascript, $.ajax,

I need help with iterating over an array and assigning a variable using a for loop. Here is the scenario: function Person(name, status){ this.name = name; this.status = status; } var status = []; var array = ["bill","bob","carl","ton"]; function exAj ...

javascriptajaxscope

Error: The method api.createContextKey is not defined while running the Next.js development server

I am currently facing an issue while attempting to start the development server for my Next.js project. The problem arises when I try to incorporate MUI into my project, resulting in these specific errors. The error message points to a TypeError related to ...

javascriptnext.jsmaterial-uiserver-side-rendering

What is the most efficient way to retrieve the key at a specific index within a JavaScript map object?

If I have the map object shown below: const items = new Map([['item1','A'], ['item2','B'], ['item3', 'C']]) I am trying to retrieve the key at index 2. Is there a method other than using a for ...

javascriptecmascript-6

What is the best way to insert a row into a JavaScript table while incorporating a cell that utilizes the datepicker function in jQuery?

Currently, I am working on a javascript function: function addItem(tableID){ var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var cell1 = row.insertCell(0); var el ...

javascriptjqueryhtmldatepicker

The functionality of Bootstrap toggle ceases to operate properly following an AJAX content update

I am currently using AJAX load to fetch some content on my webpage. I am working with Bootstrap 3 and Bootstrap toggle. When the content is loaded, the Bootstrap 3 content functions properly (the panel-primary panel is clearly visible). However, the Bootst ...

javascriptjqueryhtmlajaxtwitter-bootstrap

AngularJS: Troubleshooting a Service Function with a Dysfunctional For/In

I am facing an issue with a for/in loop within a function that is not functioning properly. $scope.items = []; jobslisting.getJobs(function(data){ for(var i = 0; i < data.length; i++){ $scope.items.push({name:data[i]}); } con ...

angularjsobjectfor-loopservice

Oops! Vue.js is throwing a compile error involving unused variables and undefined variables

I'm currently working on developing a new Vue.js component, but I'm encountering an error when launching the application. The specific error message is displayed below: https://i.sstatic.net/0MQxl.png <template> <div class="hello" ...

javascriptvue.jsvuejs2

A step-by-step guide on incorporating universal CSRF tokens using JQuery AJAX

As part of my development work, I am in the process of creating jquery code that communicates with the server through ajax to input data into a database based on specific request parameters. My main concern at this point is the vulnerability to CSRF attac ...

phpjavascriptjqueryajaxcsrf

What is the best way to change CSS style for a button when clicked using JavaScript?

Is there a way to switch the background style of a CSS div when clicking the same button? function changeBg() { var divElem = document.getElementById("change-bg"); if (divElem.style.backgroundColor === "yellow") { divElem.style.backgroundColor ...

javascripthtmlcss

A guide on resetting a Nodemon server using code

At the beginning of server start, I have an array of JSON objects that are updated. But if I make changes to the JSON data using NodeJS FS instead of manually editing it, Nodemon does not restart. Is there a way to programmatically restart nodemon? ...

javascriptnode.jsnpmnodemon