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

Capture Video on iOS devices using the MediaRecorder API and display it using HTML5 Video Player

Tips for automatically inserting a "read more" link once text exceeds a certain character count

Utilizing inline javascript to dynamically update the selected option of a radio button

What could be the reason my black overlay doesn't show up when the button is clicked?

Tips for avoiding word wrapping in text with white spaces

Enhancing Transparency of WMS Layers in OpenLayers

Is it possible to create two custom WP queries that both use the same 'rand' parameter with the 'orderby' set to 'rand'?

Tips for including event information in a form submission using Ajax and jQuery

Using Django to pass context data in a JsonResponse

Reloading jQuery event handlers following successful ajax request

The conversion of a newline in an Angular page is done using <br/&gt tag

Is there a way to verify the presence of a specific sequence of words within a string using php

Steps to showcase specific data in the bootstrap multi-select dropdown menu sourced from the database

Struggling to make AngularJS routes function properly

Troubleshooting problem with responsive image display and blurred effects

Is there a way to invoke a function within a mat-error element?

Hide, show, toggle, or empty elements using jQuery

Is there a way in Angular to activate the contenteditable feature through a controller?

Ways to enhance $.post() capabilities by incorporating additional features from $.ajax()

CKEditor's height automatically increases as the user types

jQuery Function malfunctioning after initial click

Answer №1

Answer №2

Answer №3

Similar questions

Capture Video on iOS devices using the MediaRecorder API and display it using HTML5 Video Player

Tips for automatically inserting a "read more" link once text exceeds a certain character count

Utilizing inline javascript to dynamically update the selected option of a radio button

What could be the reason my black overlay doesn't show up when the button is clicked?

Tips for avoiding word wrapping in text with white spaces

Enhancing Transparency of WMS Layers in OpenLayers

Is it possible to create two custom WP queries that both use the same 'rand' parameter with the 'orderby' set to 'rand'?

Tips for including event information in a form submission using Ajax and jQuery

Using Django to pass context data in a JsonResponse

Reloading jQuery event handlers following successful ajax request

The conversion of a newline in an Angular page is done using &lt;br/&gt tag

Is there a way to verify the presence of a specific sequence of words within a string using php

Steps to showcase specific data in the bootstrap multi-select dropdown menu sourced from the database

Struggling to make AngularJS routes function properly

Troubleshooting problem with responsive image display and blurred effects

Is there a way to invoke a function within a mat-error element?

Hide, show, toggle, or empty elements using jQuery

Is there a way in Angular to activate the contenteditable feature through a controller?

Ways to enhance $.post() capabilities by incorporating additional features from $.ajax()

CKEditor's height automatically increases as the user types

The conversion of a newline in an Angular page is done using <br/&gt tag