Is there a method in which Howler can alert at specified time intervals?

Curious to know if there is a feature in Howler JS that allows for notifications every second? This would be useful for updating a state variable that keeps track of the duration a song has been playing. One approach could be:

var audio = new Howl({
  xhr: {
    method: 'POST',
    headers: {
      Authorization: 'Access-Control-Allow-Origin:*',
    },   
    withCredentials: true,
  },
  loop: true, 
  volume: 1,
  format: ['mp3'],
  src: [mp3],
});  
audio.play();
let timePosition: number = 0;
const timer = interval(1000).subscribe((v) => {
  console.log(v);
  if (!audio.playing()) {        
    timer.unsubscribe();
  }
  timePosition = audio.seek();
  console.log(timePosition);

I am interested in finding out if Howler offers a function like:

const interval = 1000;
song.on(interval, callback)

This way the callback would be executed until the song finishes playing?

Answer №1

According to the documentation, when using Howler instances, you can utilize the method .on to listen for events. Unfortunately, there is no specific event for progression.

However, there is an option called html5 that can be toggled to true in order to enforce the use of HTML5 for playback.

The Howler#play function will return the ID of the Sound. For example:

const soundId = sound.play(); // assuming 'sound' is a Howler instance

You can retrieve the actual Sound object by calling Howler#_soundById.

const soundObj = sound._soundById(soundId);

To access the HTML5 audio element, you can use the Sound#_node property (which will be an HTMLAudioElement).

const audio = soundObj._node;

Once you have the HTMLAudioElement, you can utilize its capabilities, such as listening for progress events.

fromEvent(audio, "progress")
  .pipe(throttleTime(1000))
  .subscribe(event => {
    // perform actions with `audio` and `event` here
  });

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

Ways to make JavaScript cycle through a set of images

I'm having trouble trying to set up a code that will rotate multiple images in a cycle for an image gallery I'm working on. So far, I've only been able to get one image to cycle through successfully. Any help or suggestions would be greatly ...

AngularJS Controller assigns unexpected value to object

While working on a project, I encountered an issue with assigning float values fetched from a REST API using Angular. Instead of correctly assigning the float value, it was being set as 0. To illustrate my problem clearly, let's consider the followin ...

Tips for managing a basic click event within the Backbone.js framework

I am facing a challenge with a basic functionality in Backbone. I am trying to set up the <h1> element on my page so that when a user clicks on it, it smoothly navigates back to the homepage without a page reload. Here is the HTML snippet: <h1& ...

Dynamically size and position elements to fit perfectly within the container

I am currently facing a challenge with my absolutely positioned elements that have different position.top and height values generated from the database. The main goal is to resolve collisions between these elements by shifting them to the right while adju ...

Analyzing - Dynamically Tagging Method - Implementing direct call regulations- Erase enduring variables

https://i.sstatic.net/elGJz.jpg Hello there, I am currently utilizing a Direct call rule within DTM. When I click on a href link that opens in a new window, I want to remove or clear the eVars and events associated with the click. I have implemented custo ...

The sort function in Reactjs does not trigger a re-render of the cards

After fetching data from a random profile API, I am trying to implement a feature where I can sort my profile cards by either age or last name with just a click of a button. Although I managed to get a sorted array displayed in the console log using the h ...

In JavaScript, what does this condition signify? if(display or true, then

The display option is not required in the function, but I am confused about its usage with || true Which part of the code actually evaluates this condition? if(display || true){...} if(display || true){ $("#container").fillContent(this.showReport(this.t ...

ReactJS displays a collection of items stored within its state

I encountered an issue while trying to display a list of items in my React app with the following error message: Objects are not valid as a React child (found: [object MessageEvent]). If you meant to render a collection of children, use an array instead. ...

Creating a React component for a button that toggles between 3 different

Looking to create a button with 3 different states that handle click events and send values. The states needed are: Non-favourite Favourite Uber-favourite Attempted using this.state.count + 1 to represent the levels but faced challenges. Unsure if this ...

Troubleshooting AngularJS application by Manipulating List Items

Having trouble debugging Angular lately. It feels like things are breaking and fixing themselves magically. For instance, I had an ajax call to delete a "site" which was working fine until I decided to add some code to remove it from the list as well. Now, ...

Personalizing a Doughnut Graph

Currently in the process of creating a donut chart I am looking to achieve a design similar to the image below, where the values are displayed within the colored segments import DonutChart from 'react-d3-donut'; let data = [{ count ...

All you need to know about AngularJS and its $routeParams

Recently, I've been diving into AngularJS and came across an interesting issue. It seems that when I include $RouteParams in the injection of my AngularJS service using .service, but don't actually utilize $RouteParams, the service ceases to work ...

Display blanks rows after running a v-for loop

I am currently developing a vue component file where I have successfully fetched data using Laravel WebSockets. The issue I am encountering is that when I try to display the selected data in a table within the template tag, the rows in the table are bein ...

Buttons in Laravel are shifting unexpectedly

There are three buttons available with different functions. <div class="form-group row mb-0"> <div class="col-md-6 offset-md-4"> <button type="submit" class="btn btn-primary"> {{ __('update') ...

Utilizing JSON format for processing HTTP requests in JavaScript with Node.js

I'm working with a snippet that retrieves data in JSON format, but I'm interested in manipulating the data instead of just outputting it to the console. var request = require('request'); var headers = { 'Connection': ' ...

Enhancing User Experience: Creating a Vue Button Component for Adding Items to Cart with the Power of Axios and Laravel Backend Integration

I have recently developed a Vue3 shopping cart with an "Add One" button feature. When the user clicks this button, it updates an input field of type "number" and sends a request to update the database using Axios along with Laravel's createOrUpdate me ...

Assigning objects in Vue.js methods

I am working on a Vue component where I need to select a specific value from an array of objects and then copy certain fields from that value into Vue data. <div class="container"> <h4>Add Item</h4> <form @submit.prevent="ad ...

No input values were passed to express-validator

In my node app, I am using express-validator and encountering validation errors for all 4 form fields ("A name is required" and so on). Strangely, when I console.log the errors variable, all values are blank: errors: [{value: '', msg: 'A na ...

npm was unable to locate the module named '../lib/npm.js'

Struggling with setting up nodejs and npm on a CentOS 7 machine without internet access. I tried copying the node-v6.2.1-linux-x64 folder with some lib modules to the machine, but it's throwing an error saying Error: Cannot find module '../lib/np ...

The consistent index is shared among all dynamically generated elements

I'm currently working on a project where I am generating dropdowns within a table dynamically. I am attempting to determine the index of the dropdown that triggered the event in the following way: $(".template").on('change', '.dataType ...