如何从网页的源代码中提取URL？

Question

我正在尝试为我在Broadcastify上找到的一些扫描仪设置一个流。问题是他们使用的URL是动态的，一次只有几个小时。我想创建一个shell脚本，它可以简单地扫描访问流的页面（它有一个静态URL）并返回流的当前URL，然后可以将其提供给音频播放器。

例如，现在https://www.broadcastify.com/listen/feed/30185/web的以下流在http://audio12.broadcastify.com/kq2ydfr1jz98shw.mp3有一条流

但是，该流链接仅在短时间内起作用。我需要一个像上面那样的MP3流。

我只有很少的shell脚本经验，所以我想知道最好的方法是什么。具体来说，我的第一个问题是，如果我只是“查看页面源”并搜索“mp3”，则没有结果。我只能通过检查元素（F12开发人员工具）找到URL，例如在Chrome中，转到应用程序→框架→媒体。我以为我可以在过去的音频播放器上做一个“视图帧源”，但现在没有那个选项。

我想如果我能够使用CURL源代码我可以使用grep，但我不确定在这里我需要什么CURL，如果这是有道理的。

UPDATE

感谢mk12的洞察力。基于此，这是我的shell脚本：

#!/bin/bash

curl "https://www.broadcastify.com/listen/feed/$1/web" | grep webAuth > /var/tmp/broadcastifyauth$1.txt
pta=`cat /var/tmp/broadcastifyauth$1.txt | sed -i 's/$.ajaxSetup({ headers: { "webAuth": "//g' /var/tmp/broadcastifyauth$1.txt`
pta=`cat /var/tmp/broadcastifyauth$1.txt | sed -i 's/" }});//g' /var/tmp/broadcastifyauth$1.txt`
auth=`cat /var/tmp/broadcastifyauth$1.txt`
echo $auth

curl "https://www.broadcastify.com/listen/webpl.php?feedId=$1" --request POST --header "webAuth: $auth" --data 't=14' >/var/tmp/broadcastify$1.txt

pta=`cat /var/tmp/broadcastify$1.txt | grep -o 'http://[^"]*' > /var/tmp/broadcastify$1.b.txt`
pta=`cat /var/tmp/broadcastify$1.b.txt`
echo $pta
#pta=`cat /var/tmp/broadcastify$1.txt | sed -n '/<audio/s/^.*<audio width="300px" id="mePlayer_$1" src="\([^"]*\)".*/\1/p' > /var/tmp/broadcastify$1.b.txt`
#ptb=`cat /var/tmp/broadcastify$1.b.txt`
#echo $ptb

这是它的输出：

root@na01:/etc/asterisk/scripts/music# ./broadcastify.sh 30185
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  9175  100  9175    0     0  51843      0 --:--:-- --:--:-- --:--:-- 52130
74f440ad812f0cc2192ab782e27608cc
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   946    0   942  100     4   3851     16 --:--:-- --:--:-- --:--:--  3844
http://relay.broadcastify.com/b94hfrp5k1s0tvy.mp3?xan=DCJP4HvtwMoXdH9HvtwMJ5vv342DfleDptcoX3dH9H48vtwMJ

作品！

Answer 1

原始HTML文档中不存在mp3 URL - 稍后通过JavaScript代码将其添加到DOM中。这就是为什么你在“查看页面源代码”中找不到它，但你可以使用“Inspect element”。

如果您运行curl https://www.broadcastify.com/listen/feed/30185/web，您将在中间的某处看到以下内容：

<div id="fp" width="300px"></div>
<script>
    $.ajaxSetup({ headers: { "webAuth": "74f440ad812f0cc2192ab782e27608cc" }});
    $('#fp').load('/listen/webpl.php?feedId=30185',{t:14});
</script>

特别要注意的是，它将内容（使用jQuery .load）加载到上面最初为空的<div id="fp">中。当您使用“Inspect element”查找音频播放器时，您会发现它被放置在该div中。

在尝试使用curl重现此请求之前，我查看了开发人员工具的“网络”选项卡，以查看浏览器的功能。过滤“听”，我找到了webpl.php请求。以下是“标题”标签中的相关信息：

• 网址：https://www.broadcastify.com/listen/webpl.php?feedId=30185
• 请求 POST /listen/webpl.php HTTP / 1.1 内容类型：application / x-www-form-urlencoded webAuth：74f440ad812f0cc2192ab782e27608cc
• 查询字符串参数 feedId：30185
• 请求数据 MIME类型：application / x-www-form-urlencoded t：14

让我们用curl重现这个请求：

curl 'https://www.broadcastify.com/listen/webpl.php?feedId=30185' \
  --request POST \
  --header 'webAuth: 74f440ad812f0cc2192ab782e27608cc' \
  --data 't=14'

这是结果：

<script src="/scripts/me_4.2.9/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="/scripts/me_4.2.9/mediaelementplayer.min.css"/>
<audio width="300px" id="mePlayer_30185" src="http://relay.broadcastify.com/9wzfd3hrpyctvqx.mp3?xan=DCJP4HvtwMoXdH9HvtwMJ5vv342DfleDptcoX3dH9H48vtwMJ" type="audio/mp3" controls="controls"
       autoplay="true">
</audio>
<script>
    $('audio').mediaelementplayer({
        features: ['playpause', 'current', 'volume'],
        error: function () {
            alert("Feed has disconnected from the server.  This could be due to a power outage, network connection problem, or server problem.  Click OK to restart the player.  If the player fails to connect then the feed might be down for an extended timeframe.");
            location.reload();
        }
    });
</script>
<br />
<div class="c">If the feed does not automatically play, click or touch the play icon in the player above.</div>

在src标签的<audio>属性中有你的mp3链接。如果我们试图得到它：

$ curl http://relay.broadcastify.com/9wzfd3hrpyctvqx.mp3?xan=DCJP4HvtwMoXdH9HvtwMJ5vv342DfleDptcoX3dH9H48vtwMJ
Moved Temporarily. Redirecting to http://audio13.broadcastify.com/9wzfd3hrpyctvqx.mp3?nocache=2623053&xan=DCJP4HvtwMoXdH9HvtwMJ5vv342DfleDptcoX3dH9H48vtwMJ

如果您尝试访问该URL（或使用-L的原始URL，指示curl遵循重定向），则mp3流将作为一堆无意义的字符开始打印到您的终端。

因此，您的shell脚本应该访问/listen/webpl.php端点，而不是尝试刮取Web播放器HTML页面。或者可能只是抓取页面以首先获取webAuth令牌。

更新

为了响应您对shell脚本的更新，这里有一个简化的脚本，它执行相同的操作，并删除“Moved Temporarily”前缀以获取音频URL。请注意，不需要使用临时文件，并且$(...)语法优于`...`语法：

#!/bin/bash

# I always start my scripts with this. See https://sipb.mit.edu/doc/safe-shell/
set -eufo pipefail

auth=$(curl -s "https://www.broadcastify.com/listen/feed/$1/web" \
    | grep webAuth \
    | head -n 1 \
    | sed 's/^.*"webAuth": "//;s/".*$//')

relay_url=$(curl -s "https://www.broadcastify.com/listen/webpl.php?feedId=$1" \
    -H "webAuth: $auth" -d 't=14' \
    | grep -o 'http://[^"]*')

audio_url=$(curl -s "$relay_url" | cut -d' ' -f5)

echo "$audio_url"