CODEWITHSUNDEEP
javascriptjqueryajaxdynamic-programminghtml5-audio
Mark Klein Fermin
Mark Klein Fermin

Reputation: 79

HTML5 audio tag dynamic src ajax it does not play

I am working with Ajax getting the audio source from the data base. I successful took the data but the problem is it does not play.

<label>balay</label>
<audio id="audio" src="" type="audio/wav">

this is the HTML

$('label').hover(function(){
var ex = $(this).html();
$.post('../php/fetchAudiosrc.php' , {input:ex} , function(data){
    $('#audio').attr("src", data);
    $('#audio').get(0).play();
}

I dont need to show the fetchAudiosrc.php because it return the correct data. the problem is the audio does not really play.

Upvotes: 2

Views: 1401

Answers (2)

Ivan Silkin
Ivan Silkin

Reputation: 485

<div class="card-body" onclick="setFooterPlayerSourse(this)">
    <data value="AudioID"></data>
    <h6 class="card-title">Artist</h6>
    <h7 class="card-text">Composition</h7>
</div>

<div id="player-audio-div" >
    <audio id="player-audio-element" controls="controls" height="80" width="100%">
        <source id="player-source-element" src="null" type="audio/mp3" />
    </audio>
</div>

onclick="setFooterPlayerCourse(this)" is inserted into a "div" that has the audio ID in it's data

function setFooterPlayerSourse(el)
{
    try {
        // <data value="AudioID"></data>
        let audio_id = el.children[0].value;
        // https://localhost:5001/GetHtmlPlayer/?id=1
        let ctrl = (el.baseURI + 'GetHtmlPlayer/?id=' + audio_id);
        if ($("#player-source-element") != undefined) {
            $.ajax({ //$.get({ 
                url: ctrl,
                type: 'GET',
                contentType: 'html',
                success: function (response) {
                    console.log('Ajax returned: ' + response);
                    $("#player-audio-div").html('');
                    $("#player-audio-div").append(response);
                    plr = $("#player-audio-element").get(0);
                    plr.play();
                },
                error: function (error_) {
                    console.log("Ajax error: " + error_);
                }
            });
        }
    } catch (e) {
        alert(e)
    }
}

Upvotes: 0

Mark Klein Fermin
Mark Klein Fermin

Reputation: 79

The HTML is inside a folder so I concatenate the scr witg ../ sorry for disturbing. and thank you for dropping by.

$('label').hover(function(){
var ex = $(this).html();
$.post('../php/fetchAudiosrc.php' , {input:ex} , function(data){
    $('#audio').attr("src", '../'+data);
    $('#audio').get(0).play();
}

Upvotes: 1

Related Questions