jQuery Function malfunctioning after initial click

Question

jQuery Function malfunctioning after initial click

I have developed a function that plays and pauses music. It is designed to be simple and lightweight for small audio samples, with basic play and stop functionalities. The issue I'm encountering is that after playing the music for the second time, the classes are not switching correctly for pausing.

Below is the jQuery code snippet:

var isPlaying = false;
function playMusic(){
    var audioElement = document.createElement('audio');
    var audioElementSrc = $(this).attr('data-audio-src');               

    if (isPlaying != true)
    {
        isPlaying = true;
        audioElement.setAttribute('src', audioElementSrc);
        $.get();
        audioElement.addEventListener("loadeddata", function(){
            audioElement.play();                
        }, true);
        audioElement.addEventListener("ended", function() {
            isPlaying = false;    
        });  
        $(this).addClass('pause');
        $(this).removeClass('play'); 
        $('.pause').click(function() {
            audioElement.pause();
            isPlaying = false
            $(this).removeClass('pause');
            $(this).addClass('play');
        });             
    }
    else
    {
        return false;
    }           
}

$(function(e){
    $('.play').click(playMusic);  
});

You can view the jsfiddle Here which showcases the issue - when you click on stop and then try to play again, the classes do not switch as expected.

jquery html css

Answer 1

Answer №1

You have definitely made things more complicated by using plain JavaScript functions and replacing the audio element every time the play button is clicked.

Try incorporating more jQuery into your code and storing the audio element - it will make things much simpler

$(function (e) {
    $('.play').click(function() {
        var self = $(this).toggleClass('pause play');

        if (!this.audio) {
            this.audio = $('<audio />', {src : self.data('audio-src')}).on({
                loadeddata : function() {
                    this.play();
                },
                ended : function() {
                    self.toggleClass('pause play');
                }
            }).get(0);
        }else{
            this.audio[this.audio.paused ? 'play' : 'pause']();
        }
    });
});

FIDDLE

Answer 2

You have definitely made things more complicated by using plain JavaScript functions and replacing the audio element every time the play button is clicked.

Try incorporating more jQuery into your code and storing the audio element - it will make things much simpler

$(function (e) {
    $('.play').click(function() {
        var self = $(this).toggleClass('pause play');

        if (!this.audio) {
            this.audio = $('<audio />', {src : self.data('audio-src')}).on({
                loadeddata : function() {
                    this.play();
                },
                ended : function() {
                    self.toggleClass('pause play');
                }
            }).get(0);
        }else{
            this.audio[this.audio.paused ? 'play' : 'pause']();
        }
    });
});

FIDDLE

Answer 3

Answer №2

Upon reviewing the play code, I came across the following:

$('.pause').click(function() {
  audioElement.pause();
  isPlaying = false
  $(this).removeClass('pause');
  $(this).addClass('play');
});

The issue here is that this code is changing an element with the class .pause, which ends up overriding the function it's contained in! Additionally, the main if statement appears as follows:

if (isPlaying != true)
{
// Play code here           
}
else
{
return false;
}

What you actually need is:

    if (isPlaying != true)
    {
    // Play code here           
    }
    else
    {
    // Pause code here
    }

With these changes implemented, your new code will be structured like so:

 var isPlaying = false;
            function playTune(){
                    var audioTrack = document.createElement('audio');
                    var trackSource = $(this).attr('data-track-source');               

                    if (isPlaying != true)
                    {
                        isPlaying = true;
                        audioTrack.setAttribute('src', trackSource);
                        $.get();
                        audioTrack.addEventListener("loadeddata", function(){
                        audioTrack.play();                
                        }, true);
                         audioTrack.addEventListener("ended", function() {
                         isPlaying = false;    
                        });  
                        $(this).addClass('pause');
                        $(this).removeClass('play');            
                    }
                    else
                    {
                        audioTrack.pause(); 
                        isPlaying = false
                        $(this).removeClass('pause');
                        $(this).addClass('play');
                    }           
                }

            $(function(e){
                $('.play').click(playTune);  
            });

Answer 4

Upon reviewing the play code, I came across the following:

$('.pause').click(function() {
  audioElement.pause();
  isPlaying = false
  $(this).removeClass('pause');
  $(this).addClass('play');
});

The issue here is that this code is changing an element with the class .pause, which ends up overriding the function it's contained in! Additionally, the main if statement appears as follows:

if (isPlaying != true)
{
// Play code here           
}
else
{
return false;
}

What you actually need is:

    if (isPlaying != true)
    {
    // Play code here           
    }
    else
    {
    // Pause code here
    }

With these changes implemented, your new code will be structured like so:

 var isPlaying = false;
            function playTune(){
                    var audioTrack = document.createElement('audio');
                    var trackSource = $(this).attr('data-track-source');               

                    if (isPlaying != true)
                    {
                        isPlaying = true;
                        audioTrack.setAttribute('src', trackSource);
                        $.get();
                        audioTrack.addEventListener("loadeddata", function(){
                        audioTrack.play();                
                        }, true);
                         audioTrack.addEventListener("ended", function() {
                         isPlaying = false;    
                        });  
                        $(this).addClass('pause');
                        $(this).removeClass('play');            
                    }
                    else
                    {
                        audioTrack.pause(); 
                        isPlaying = false
                        $(this).removeClass('pause');
                        $(this).addClass('play');
                    }           
                }

            $(function(e){
                $('.play').click(playTune);  
            });

Answer 5

Answer №3

Avoid placing the code snippet within this section as it may cause issues. Instead, consider adding the pause function at the beginning only once using a delegate like this:

$(".songPlayer").delegate('.pause','click', function());

The issue arises from attaching the event on pause multiple times, leading to it being called repeatedly with each click.

Answer 6

Avoid placing the code snippet within this section as it may cause issues. Instead, consider adding the pause function at the beginning only once using a delegate like this:

$(".songPlayer").delegate('.pause','click', function());

The issue arises from attaching the event on pause multiple times, leading to it being called repeatedly with each click.

jQuery Function malfunctioning after initial click

Answer №1

Answer №2

Answer №3

Similar questions

PHP echo functions are not functioning properly in a dynamically loaded PHP page through jQuery's .load function

Accessing the current frame of a video in JavaScript or jQuery

Exploring the JSON structure

What is the process for transforming information from a database into a clickable hyperlink?

Flexbox keeps elements on the same line without breaking

div table with varying cell styles on each row

Ways to vertically center an absolutely positioned element

Display or conceal a div based on the size of the screen using HTML and CSS

Having difficulty invoking a JavaScript function through PHP

Having trouble getting wire:click to work within an if statement in Laravel Livewire

The text should be wrapped to overlap with an image positioned above it

Clear session data when logging out from a dropdown list

What is the best way to align a Font Awesome icon within an SVG circle?

Attempting to extract information from website, successful on majority of sites but encountering issues on this particular one

When JSON data is displayed in an HTML table, it mysteriously duplicates

"Sending data with jQuery by encoding an array in PHP and converting it

Centered buttons placed right next to each other

Exploring Image Access with Rails and jQuery

Randomly switch out the wordpress header image at designated intervals

File uploads in Django may pose a challenge when the request is sent from Ajax along with a form