jquery 如何在网页中加载音频文件?

vdzxcuhz  于 12个月前  发布在  jQuery
关注(0)|答案(1)|浏览(134)

我正在检查this网页。我发现音频文件在开始时没有加载。当我点击播放按钮时,下面的标签被附加到html上。

<div id="mp3_jplayer_items" style="position:relative; overflow:hidden; margin:0; padding:0; border:0; width:0px; height:0px;">
    <div id="mp3_jplayer_1_8" style="left: -999em; width: 0px; height: 0px;">
        <img id="jp_poster_0" style="width: 0px; height: 0px; display: none;">
        <audio id="jp_audio_0" preload="none" src="http://www.parand.se/audio/kodak/minoo-javan-04-pache-laili.mp3"></audio>
    </div>
</div>

字符集
当我点击另一个音频时,src属性会更改为指向新音频的链接。当我打开检查器的网络选项卡加载页面时,我首先收到很多请求,然后它就停止了。然后当我点击一个音频文件时,我收到这个请求:

curl 'http://www.parand.se/audio/kodak/minoo-javan-14-khorouskhan.mp3' -H 'Host: www.parand.se' -H 'User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0' -H 'Accept: audio/webm,audio/ogg,audio/wav,audio/*;q=0.9,application/ogg;q=0.7,video/*;q=0.6,*/*;q=0.5' -H 'Accept-Language: en-US,en;q=0.5' -H 'Referer: http://parand.se/?p=5026' -H 'Range: bytes=0-' -H 'DNT: 1' -H 'Connection: keep-alive'


这是下载文件的请求。没有得到文件的链接。
另一方面,当我用firefox下载网页时,我没有找到任何指向任何mp3文件的链接,也没有发现任何链接内的作品khorouskhan的出现,并且是在歌曲的名称中。

# fox is the directory in which I've downloaded the webpage.

$ grep -RPo 'khorouskhan' fox | sort | uniq
# this has no output at all.
$ grep -RPo '[^"]*\.mp3' fox | sort | uniq 
fox/files/jquery_002.js:),this.element.empty(),delete this.instances[this.internal.instance]},enable:function(){},disable:function(){},_testCanPlayType:function(t){try{return t.canPlayType(this.format.mp3
fox/files/mp3-jplayer-2.js:     data = { is_download: p.download , url: p.list[track].mp3
fox/files/mp3-jplayer-2.js:     exData.mp3 = p.list[track].mp3
fox/files/mp3-jplayer-2.js:     that.dl_runinfo( p.list[p.tr].mp3
fox/files/mp3-jplayer-2.js:         media[ track.formats[0] ] = track.mp3
fox/files/mp3-jplayer-2.js:         media['mp3'] = this.plugin_path + '/mp3/silence.mp3
fox/files/mp3-jplayer-2.js:         var pU = ( preL !== false ) ? preL[ this.pl_info[this.tID].tr ].mp3
fox/files/mp3-jplayer-2.js:                     arr[j].mp3 = this.f_undo.f_con( arr[j].mp3
fox/files/mp3-jplayer-2.js:' + p.list[track].mp3
fox/files/v1-silver.css:.mp3
fox/files/v1-silver.css:div.mp3
fox/files/v1-silver.css:div.player-track-title.mp3
fox/files/v1-silver.css:iframe.mp3
fox/files/v1-silver.css:span.mp3-finding, span.mp3
fox/files/v1-silver.css:ul.ul-mjp.mp3
fox/files/v1-silver.css:    div.mp3
fox/files/v1-silver.css:    span.mp3
fox/files/v1-silver.css:        div.mp3
fox/files/v1-silver.css:            div.mp3
fox/files/v1-silver.css:            .dark div.mp3
fox/files/v1-silver.css:        .dark div.mp3
fox/files/v1-silver.css:        .text div.mp3
fox/files/v1-silver.css:    .bigger1 span.mp3
fox/files/v1-silver.css:    .bigger2 span.mp3
fox/files/v1-silver.css:    .bigger3 span.mp3
fox/files/v1-silver.css:    .bigger4 span.mp3
fox/files/v1-silver.css:    .bigger5 span.mp3
fox/files/v1-silver.css:    .dark .mp3
fox/files/v1-silver.css:    .dark div.mp3
fox/files/v1-silver.css:    .dark.outline div.mp3
fox/files/v1-silver.css:    .nopopoutbutton div.mp3
fox/files/v1-silver.css:    .noscreen div.mp3
fox/files/v1-silver.css:    .outline div.mp3
fox/files/v1-silver.css:    .statusMI span.mp3-finding, .statusMI span.mp3-tint, div.statusMI span.mp3
fox/files/v1-silver.css:    .statusMI span.mp3-tint, .statusMI span.mp3
fox/files/v1-silver.css:    .text div.mp3
fox/index.html:.mp3
fox/index.html:.a-mjp.mp3
fox/index.html:.transport-MI div, .mp3

问题是:

我认为JavaScript应该从对服务器的API调用中获取链接,或者链接应该是硬编码的。我认为grep结果显示1.1它要么不是硬编码的,或者是1.2我从浏览器下载的网页并不是服务器提供给我的浏览器的所有内容。另一方面,我没有看到任何其他请求,下载请求。我认为这意味着它要么2.1不是从API调用获取的,要么2.2网络选项卡不显示从浏览器发送的所有请求。
所以基本上。我的想法是:

(1.1 or 2.1) = true
(!1.1 or 1.2) = true
(!2.1 or 2.2) = true


那么{1.1,1.2,2.1,2.2}中的哪一个是正确的?或者我错了什么?

jvlzgdj9

jvlzgdj91#

这是一个非常古老的问题,但我不妨提供答案,以防有人想知道。
在加载所有脚本后,有一个请求,请求id=42768的播放列表,此请求将转到here。此请求包含有关播放列表中曲目的所有链接和信息(例如曲目名称、标题、媒体链接
它看起来是一个简单的JSON API,网站是建立在WordPress的audioignitor音乐播放器插件上的。至于它如何获取播放列表ID,这看起来是一些服务器端渲染(我假设它是由插件完成的)。API的URL通过类audioigniter-root传递到div的标签中。

相关问题