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

Obtain the class attribute of a CSS element with whitespaces using PHP's XML/HTML

DropDownListFor with automatic postback feature

Is there a way in Selenium to determine the type of tag associated with the element we are trying to locate?

Angular Checkbox Binding Issue Detected

How to incorporate markdown files as strings in Next.js

Create an array that can contain a mix of nested arrays and objects

Traditional alignment challenges arise when trying to position two elements in a row using HTML and CSS

Troubleshooting NodeJS CORS issue with heavy requests for file uploads

Limit the number of elements in an Angular object by using the filter function

How to set focus on the active accordion in jQuery accordion?

Implementing additional states in an AngularJS app configuration with Ui-Router

How can one execute a function within an HTML attribute value using Angular?

Optimizing Chrome's Precious Load Time

The ASP variable fails to display its value within the tags

code, scripting - modal pop-up

How can I verify the status of an occasional undefined JSON value?

Error: Unable to access the 'comments' property of a null value

The Navbar in Bootstrap 3 remains expanded and does not collapse

Is the presence of hidden list items leading to excessive white space?

Create a visually appealing DataGrid cell by incorporating a vibrant colored oval with text or an icon inside