HTML5音频标签动态src ajax它不播放

Question

我正在使用Ajax从数据库中获取音频源。我成功地拿到了数据，但问题是它没有发挥作用。

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

这是HTML

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

我不需要显示fetchAudiosrc.php，因为它返回了正确的数据。问题是音频并没有真正播放。

Answer 1

HTML在一个文件夹中，所以我将scr连接到../抱歉打扰了。感谢您的光临。

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

Answer 2

<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）"被插入到"；div"；它的数据中有音频ID

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)
    }
}