Add code to switch the image when the music is being played

Question

Add code to switch the image when the music is being played

I have a scenario where I am using this code to control the playback of song samples, and there are multiple instances of it on the page. I am looking to enhance this functionality by adding some code that will change the background-image of only the specific instance with the .playback class to pausebutton.gif after the song is played. Furthermore, when the button is pressed again, I want it to change back to playbutton.gif. Since there are multiple instances on the page, I am wondering if this can be achieved using a class. Any assistance on how to implement this would be greatly appreciated. Thank you.

<script type="text/javascript>
$(function() {
$(".playback").click(function(e) {
   e.preventDefault();
   var song = $(this).next('audio').get(0);
   if (song.paused)
     song.play()
   else
     song.pause()
   });
   });

<style>
.playback:link   
{background:url('images/playbutton.gif');display:block;width:18px;height:18px;}
</style>

<a class="playback" href="#"></a><audio id="wonderful"><source src="audio/wonderful.mp3" type="audio/mpeg"  /></audio>

jquery css audio toggle background-image

Answer 1

Answer №1

To enhance your CSS, you can include the following code:

.playback.playing {
    background: url('images/pausebutton.gif');
 }

This particular style will target elements that have both the classes playback and playing.

Then, in your JavaScript:

$(".playback").click(function(e) {
    e.preventDefault();
    var song = $(this).next('audio').get(0);
    if (song.paused) {
        song.play();
        $(this).addClass("playing");
    } else {
        song.pause();
        $(this).removeClass("playing");
    }
});

When the click event occurs, the reference to $(this) within the function isolates the specific element with the class playback that was clicked. The addClass method then adds the playing class solely to the link associated with the played song. To further explain, I utilized removeClass to eliminate the playing class when the song is paused.

If feasible, a more efficient approach would involve merging playbutton.gif and pausebutton.gif into a single 36x18 image named playbackbuttons.gif. Adjust your CSS as follows:

.playback:link {
    background: url('images/playbackbuttons.gif');
    display: block;
    width: 18px;
    height: 18px;
}

.playback.playing {
    background-position: right top;
}

(The JavaScript code remains unchanged from my previous explanation.)

With this modification, the pause button image loads upon the initial page load rather than when a song begins playing for the first time.

Answer 2

To enhance your CSS, you can include the following code:

.playback.playing {
    background: url('images/pausebutton.gif');
 }

This particular style will target elements that have both the classes playback and playing.

Then, in your JavaScript:

$(".playback").click(function(e) {
    e.preventDefault();
    var song = $(this).next('audio').get(0);
    if (song.paused) {
        song.play();
        $(this).addClass("playing");
    } else {
        song.pause();
        $(this).removeClass("playing");
    }
});

When the click event occurs, the reference to $(this) within the function isolates the specific element with the class playback that was clicked. The addClass method then adds the playing class solely to the link associated with the played song. To further explain, I utilized removeClass to eliminate the playing class when the song is paused.

If feasible, a more efficient approach would involve merging playbutton.gif and pausebutton.gif into a single 36x18 image named playbackbuttons.gif. Adjust your CSS as follows:

.playback:link {
    background: url('images/playbackbuttons.gif');
    display: block;
    width: 18px;
    height: 18px;
}

.playback.playing {
    background-position: right top;
}

(The JavaScript code remains unchanged from my previous explanation.)

With this modification, the pause button image loads upon the initial page load rather than when a song begins playing for the first time.

Answer 3

Answer №2

e will represent the jQuery.Event object, so be sure to utilize $(this):

$(".playback").click(function(e) {
    e.preventDefault();
    var track = $(this).next('audio').get(0);
    if (track.paused) {
        track.play();
        $(this).addClass("playing");
    } else {
        track.pause();
        $(this).removeClass("playing");
    }
});

I showcased using color in my example, but remember to modify it to use background-image instead.

Answer 4

e will represent the jQuery.Event object, so be sure to utilize $(this):

$(".playback").click(function(e) {
    e.preventDefault();
    var track = $(this).next('audio').get(0);
    if (track.paused) {
        track.play();
        $(this).addClass("playing");
    } else {
        track.pause();
        $(this).removeClass("playing");
    }
});

I showcased using color in my example, but remember to modify it to use background-image instead.

Add code to switch the image when the music is being played

Answer №1

Answer №2

Similar questions

Why do images not show up when they are in the same directory in HTML?

Export data from jQuery DataTables to Excel file

What is the best way to ensure that my text is perfectly centered both horizontally and vertically within this DIV?

Creating a Dynamic Division Using jQuery

Displaying and Concealing Elements with AngularJS and Implementing Alternating Styles

Deciding Between Javascript DOM and Canvas for Mobile Game Development

Discover the best method for combining and comparing arrays using jQuery

Visualizing live data streaming from MySQL

Interactive front end design for decision trees

Changing the position of an element in CSS using the center as the reference point, based on a JavaScript variable: How can it be done?

Utilizing document.getElementById to toggle the CSS to 'display:none'

"Utilizing Bootstrap to add borders to div elements is a

Unable to adjust the dimensions of a Mailchimp input field

The controller argument for Ajax data object is found to be empty

Retrieving JSON information from a RESTful API

Storing newly generated rows using PHP and JavaScript

Choose a portion of the content within a div element

Tips for displaying a message if an Ajax function returns zero records

Choose a particular element using a randomly generated ID in JQuery

Error: Page not found - The requested URL localhost:8080/login could not be located