CODEWITHSUNDEEP
javascriptjqueryajaxaudio
Sithira
Sithira

Reputation: 1016

Audio wont play after loading contents with AJAX

First of all im new to jquery i have tried googling my problem , spent hours to fix this and i couldn't find any , so here i am .

In the below code i have fetched some information ( Songs details ) from database and loaded them to div via ajax .. Up to this point everything works just fine .

script using to load content via AJAX

    $(document).ready(function() {
        $("#results" ).load( "ajax/profile_ajax.php"); //load initial records

        //executes code below when user click on pagination links
        $("#results").on( "click", ".pagination a", function (e){
            e.preventDefault();
            $(".loading-div").show(); //show loading element
            var page = $(this).attr("data-page"); //get page number from link
            $("#results").load("ajax/profile_ajax.php",{"page":page}, function(){ //get content from PHP page
                $(".loading-div").hide(); //once done, hide loading element
            });

        });
    });


<div class="loading-div"><img src="../pagination/ajax-loader.gif" ></div>
<div id="results"></div><!-- content will be loaded here -->

Script im using to play audio

$(function () {
    var curAudio;
    $(".playback").click(function (e) {
        e.preventDefault();
        var song = $(this).next('audio')[0];

        if (curAudio && song != curAudio && !curAudio.paused) {
            curAudio.pause();
            $(curAudio).prev().html('<i class="fa fa-play"></i> Play');
        }

        if (song.paused) {
            song.play();
            curAudio = song;
            $(this).html('<i class="fa fa-pause"></i> Stop');
        } else {
            song.pause();
            curAudio = undefined;
            $(this).html('<i class="fa fa-play"></i> Play');
        }
        curPlaying = $(this).parent()[0].id;
    });
});

I have above code to played the fetched music . Now the problem is None of the Buttons are functional even though my code worked fine before i use AJAX .

My Fecthed HTML is like this 

<div id="4">
Track Name :- <b>Heros</b>
<br />By :- <a target="_blank" href="../members/profile.php?id=1">USER NAME</a>
<br />
<button class="playback btn btn-primary btn-sm hdnbtn"><i class="fa fa-play"></i> Play</button>
<audio src="../members/memberfiles/1/Heros.mp3">
    Your browser does not support HTML5 audio.
</audio>
<a class="btn btn-sm btn-success hdnbtn" href="../members/downloader.php?fld=1&name=Heros.mp3" name="dwn"><i class="fa fa-download"></i> Download MP3</a>
<button class="sharer btn btn-sm btn-danger hdnbtn" type="button"><span class="fa fa-share-alt"></span> Share</button>
<a target="_blank" href="#" class="hide btn btn-sm btn-social btn-facebook socialhdn"><i class="fa fa-facebook"></i>  Share on Facebook</a>
<a target="_blank" href="#" class="hide btn btn-sm btn-social btn-twitter socialhdn"><i class="fa fa-twitter"></i>  Tweet this </a>
<a target="_blank" href="#" class="hide btn btn-sm btn-social btn-google-plus socialhdn"><i class="fa fa-google-plus"></i>  Share on goole</a>
<br />
<a href="javascript:void();" class="cls_close hide btn-primary btn btn-xs"><i class="fa fa-minus"> Show Less</i></a>
<input type="hidden" value="Heros.mp3" name="file_name">
<input type="hidden" value="bWVtYmVyZmlsZXMvMS9IZXJvcy5tcDM=" name="link">

What i really need is to play the fetched content using the 2nd script (audio) i posted . i have no idea how to fix this . Tried hours of googling and various suggested methods. None of them worked for me . Please Point out what went wrong . i really appreciate it !

Upvotes: 1

Views: 1143

Answers (1)

Nishit Maheta
Nishit Maheta

Reputation: 6031

use below code to play audio . you also check Event delegation to attach event to dynamically created element. Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

 $(function () {
   var curAudio;
   $(document).on('click',".playback",function (e) {
    e.preventDefault();
    var song = $(this).next('audio')[0];

    if (curAudio && song != curAudio && !curAudio.paused) {
        curAudio.pause();
        $(curAudio).prev().html('<i class="fa fa-play"></i> Play');
    }

    if (song.paused) {
        song.play();
        curAudio = song;
        $(this).html('<i class="fa fa-pause"></i> Stop');
    } else {
        song.pause();
        curAudio = undefined;
        $(this).html('<i class="fa fa-play"></i> Play');
    }
    curPlaying = $(this).parent()[0].id;
   });
 });

Upvotes: 1

Related Questions