最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】jquery的js中无法设置audio的source的src和type属性

设置 crifan 1177浏览 0评论
折腾:
【已解决】Bootstrap+jquery中添加好看好用的音频播放器
期间,需要去,在jquery的get访问服务器返回数据后的回调中,去设置audio的一些信息,包括title,url和type。
期间也查看了,之前刚弄过的:
【已解决】jquery的js中如何设置html元素的值
jQuery Set Content and Attributes
所以对于html是:
<audio data-info-att="Audio: Iain Houston and Felix Gibbons." <source="" src="


" type="audio/mpeg">
        </audio>
用代码:
$.ajax({
   type : "GET",
   url : fullQaUrl,
   success: function(respJsonObj){
        console.log("respJsonObj=%o", respJsonObj);

        // var respnJsonStr = JSON.stringify(respJsonObj);
        //var beautifiedJespnJsonStr = JSON.stringify(respJsonObj, null, '\t');
        var beautifiedJespnJsonStr = JSON.stringify(respJsonObj, null, 2);
        console.log("beautifiedJespnJsonStr=%s", beautifiedJespnJsonStr);

        var prevOutputValue = $('#response').text();
        console.log("prevOutputValue=%o", prevOutputValue);
        var afterOutputValue = $('#response').html('<pre><code class="json">' + beautifiedJespnJsonStr + "</code></pre>");
        console.log("afterOutputValue=%o", afterOutputValue);

        if (respJsonObj) {
            if (respJsonObj["data"]) {
                if (respJsonObj["data"]["audio"]) {
                    audioDict = respJsonObj["data"]["audio"];
                    console.log("audioDict=%o", audioDict);

                    audioName = audioDict["name"];
                    console.log("audioName=%o", audioName);
                    if (audioName) {
                        $(".audio_player audio").attr("data-info-att", audioName);
                    }

                    audioType = audioDict["contentType"];
                    console.log("audioType=%o", audioType);
                    if (audioType) {
                        $(".audio_player audio source").attr("type", audioType);
                    }

                    audioUrl = audioDict["url"];
                    console.log("audioUrl=%o", audioUrl);
                    if (audioUrl) {
                        //$(".audio_player audio source").attr("src", audioUrl);
                        //$(".audio_player source").attr("src", audioUrl);
                        var sourceElt = $(".audio_player source")
                        console.log("sourceElt=%o", sourceElt);
                        // var sourceSrcAttr = sourceElt.attr("src");
                        // console.log("sourceSrcAttr=%o", sourceSrcAttr);
                        // sourceSrcAttr.val(audioUrl);
                        // console.log("sourceSrcAttr=%o", sourceSrcAttr);

                        sourceElt.attr("src", audioUrl);

                        // $(".audio_player source").src(audioUrl);
                    }
                } else {
                    console.log("empty respJsonObj['data']['audio']=%o", respJsonObj["data"]["audio"]);
                }
            } else{
                console.warn("empty respJsonObj['data']=%o", respJsonObj["data"]);
            }
        } else{
            console.warn("empty respJsonObj=%o", respJsonObj);
        }
结果发现:
可以设置audio的data-info-att这个attribute
但是无法设置audio下面的source的src和type
jquery set audio source
switch audio source with jquery and HTML5 audio tag – Stack Overflow
Setting source of audio element programatically – jQuery Forum
HTML Audio/Video DOM src Property
Changing HTML 5 video with JavaScript or jQuery
switch audio source with jquery and HTML5 audio tag | CODE Q&A [English]
好像是,修改了内容后,需要调用load去加载才行?
HTML Audio/Video DOM load() Method
“The load() method is used to update the audio/video element after changing the source or other settings.”
去试试load()
if (respJsonObj) {
    if (respJsonObj["data"]) {
        if (respJsonObj["data"]["audio"]) {
            audioDict = respJsonObj["data"]["audio"];
            console.log("audioDict=%o", audioDict);

            audioElt = $(".audio_player audio");
            console.log("audioElt=%o", audioElt);

            audioName = audioDict["name"];
            console.log("audioName=%o", audioName);
            if (audioName) {
                audioElt.attr("data-info-att", audioName);
            }

            audioType = audioDict["contentType"];
            console.log("audioType=%o", audioType);
            if (audioType) {
                //$(".audio_player audio source").attr("type", audioType);
                $(".audio_player audio source").attr("type", "audio/ogg");
                audioElt.load();
            }

            audioUrl = audioDict["url"];
            console.log("audioUrl=%o", audioUrl);
            if (audioUrl) {
                //$(".audio_player audio source").attr("src", audioUrl);
                //$(".audio_player source").attr("src", audioUrl);
                var sourceElt = $(".audio_player source")
                console.log("sourceElt=%o", sourceElt);
                // var sourceSrcAttr = sourceElt.attr("src");
                // console.log("sourceSrcAttr=%o", sourceSrcAttr);
                // sourceSrcAttr.val(audioUrl);
                // console.log("sourceSrcAttr=%o", sourceSrcAttr);

                sourceElt.attr("src", audioUrl);

                // $(".audio_player source").src(audioUrl);

                audioElt.load();
            }
        } else {
            console.log("empty respJsonObj['data']['audio']=%o", respJsonObj["data"]["audio"]);
        }
    } else{
        console.warn("empty respJsonObj['data']=%o", respJsonObj["data"]);
    }
} else{
    console.warn("empty respJsonObj=%o", respJsonObj);
}
结果问题依旧:
后面不行的话,可以去试试:
设置html?
把source写在audio下面
jquery change audio source
Audio setting src from controller | The ASP.NET Forums
https://forums.asp.net/t/2064232.aspx?Audio+setting+src+from+controller
发现此处的html写的有问题:
<audio
    controls
    data-info-att="Audio: Iain Houston and Felix Gibbons."
    <source src="http://playerdemo.iainhouston.com/tests/BeBopAliens.mp3" type="audio/mpeg" />
</audio>
改为
<audio
    controls
    data-info-att="Audio: Iain Houston and Felix Gibbons.">
    <source src="http://playerdemo.iainhouston.com/tests/BeBopAliens.mp3" type="audio/mpeg" />
</audio>
结果:
至少可以修改src和type了:
【总结】
此处,实际上是自己的html中的audio的语法出错了:
<audio
    controls
    data-info-att="Audio: Iain Houston and Felix Gibbons."
    <source src="http://playerdemo.iainhouston.com/tests/BeBopAliens.mp3" type="audio/mpeg" />
</audio>
改为:
<audio
    controls
    data-info-att="Audio: Iain Houston and Felix Gibbons.">
    <source src="http://playerdemo.iainhouston.com/tests/BeBopAliens.mp3" type="audio/mpeg" />
</audio>
就可以用:
if (audioName) {
    audioElt.attr("data-info-att", audioName);
    $(".col-sm-offset-1").text(audioName);
}

if (audioType) {
    $(".audio_player audio source").attr("type", audioType);
}

if (audioUrl) {
    $(".audio_player audio source").attr("src", audioUrl);

    audioElt[0].load();
}

if (((audioControl == null) || (audioControl == "") ) && audioUrl) {
    audioElt[0].play();
} else if ((audioControl == "next") && (audioUrl)) {
    audioElt[0].play();
} else if (audioControl == "stop") {
    audioElt[0].stop();
} else if (audioControl == "continue") {
    audioElt[0].play();
}
去设置src,type的值,且可以去load后,再去play和stop了。

转载请注明:在路上 » 【已解决】jquery的js中无法设置audio的source的src和type属性

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
81 queries in 0.175 seconds, using 22.16MB memory