Turn off HTML5 Audio

Question

Turn off HTML5 Audio

There are 4 <audio> elements on a webpage. The client has asked for them to be available sequentially.

Meaning, the first audio should play, then the rest should remain disabled until the first one finishes, and so on.

In addition, they want the audio players to be visible on screen at all times, even when not actively playing (instead of adding them dynamically).

So, my question is: How can I disable an audio tag without using the disabled attribute (<audio disabled>)?

Thank you in advance.

Update: I would appreciate any CSS, JS, or JQuery solutions that could help achieve this. Essentially, I am looking to simulate a disabled button effect but for HTML audio tags.

javascript jquery css html audio

Answer 1

Answer №1

Another way to deactivate an audio element is by including

style="pointer-events:none"

in it…

Answer 2

Another way to deactivate an audio element is by including

style="pointer-events:none"

in it…

Answer 3

Answer №2

If the HTML structure is as follows:

<audio src='...' controls id='audio1'></audio>
<audio src='...' controls id='audio2'></audio>
<audio src='...' controls id='audio3'></audio>
<audio src='...' controls id='audio4'></audio>

Here's a potential jQuery solution:

var audioTracks = ['audio1', 'audio2', 'audio3', 'audio4'];
var currentTrackIndex = 0;

$('audio').each(function() {

    this.addEventListener('play', function(){
        if(this.id != audioTracks[currentTrackIndex]){
            this.pause();
            this.currentTime = 0;
        }
    });

    this.addEventListener('ended', function(){
        currentTrackIndex = (currentTrackIndex + 1) % audioTracks.length;
    });
});

Answer 4

If the HTML structure is as follows:

<audio src='...' controls id='audio1'></audio>
<audio src='...' controls id='audio2'></audio>
<audio src='...' controls id='audio3'></audio>
<audio src='...' controls id='audio4'></audio>

Here's a potential jQuery solution:

var audioTracks = ['audio1', 'audio2', 'audio3', 'audio4'];
var currentTrackIndex = 0;

$('audio').each(function() {

    this.addEventListener('play', function(){
        if(this.id != audioTracks[currentTrackIndex]){
            this.pause();
            this.currentTime = 0;
        }
    });

    this.addEventListener('ended', function(){
        currentTrackIndex = (currentTrackIndex + 1) % audioTracks.length;
    });
});

Turn off HTML5 Audio

Answer №1

Answer №2

Similar questions

Exploring an HTML document with XPath expressions

Looking for guidance on implementing explicit waits in Protractor for non-angular applications

Utilize a class method within the .map function in ReactJS

Aligning the .left position to make the border of a <div> synchronized

Transitioning images smoothly and responsively with jQuery, creating a beautiful

Convert the div into a string, including only the visible elements

Mastering the Art of Resizing Video Controls: A

What is the best way to modify a CSS property using logical operators in JQuery?

Accessing JSON data and populating a dropdown menu with JQuery

Animate the entrance of mobile content as it slides into view while scrolling

Can the image be adjusted based on different time zones around the world?

Converting data into a multidimensional array in AngularJS: A comprehensive guide

What are the different ways to position div containers using CSS?

What is the reason for a jQuery load to fail when www is included in the URL?

Tips for displaying external JavaScript code in an alert box:

The function history.popstate seems to be malfunctioning, as it is triggered by both the forward and backward navigation buttons in

Check the Full Calendar to see if any events are scheduled for today

The combination of Node.js module.exports and shorthand ternary operators for conditional statements

What steps can I take to correct this CSS code? I am looking to update the content using CSS

How to position an absolute div in the center of an image both vertically and horizontally