【编程底层原理】从播放音乐的网页中提取mp3音频文件的两种方式及背后的技术思考【短连接和长连接】

简介: 本文介绍了两种从网页提取音乐文件的方法:一是通过IE临时缓存获取,二是利用开发者模式捕捉网络流量并下载音频URL。同时探讨了网页播放音乐的技术实现,包括短连接和长连接的区别及其适用场景,以及数据传输中的阻塞概念。


关键字:播放音乐, 提取mp3, 网页音频, 技术思考, 短连接, 长连接, 开发者模式, IE临时缓存, 网络流量捕获, URL下载, 三次握手, 数据传输, 阻塞, 实时数据

两种方式可以获取,第一种更为直接,第二种通用一些:

一、从IE临时缓存内容的本地路径获取,具体操作步骤如

打开工具栏(Alt+X)>打开Internet选项(Ctrl+O)>在弹出的常规Tab页点击设置(Alt+S)>(Ctrl+V),找到IE临时缓存内容的本地路径(比如我本地是这个路径是:C:\Users\Administrator\AppData\Local\Microsoft\Windows\Temporary Internet Files,每个人的路径可能不同,请按照上述操作去找路径);
然后开始在网页上播放音乐,播放音乐后,IE就会自动将正在播放的音乐的数据文件下载到该路径下;
在该路径下找到对应播放时间的名称带mp3的.dat格式文件,将此文件复制到本地要保存的其他路径下,然后将文件名及其格式改为"XXX.mp3",即可。

二、通过开发者模式找到音频文件所在URL,再用迅雷或其他下载工具下载

打开音乐播放网页,点击F12进入开发者模式,点击网络Tab页,点击右下角的绿色倒三角以便启用网络流量捕获(F5);
然后开始在网页上播放音乐,播放音乐后,会监控到IE播放音乐时访问的具体URL网址,可以看到mp3的url,一般按照【已接收】大小排序,就可以找到音乐所在的网址。右键包含mp3的那条记录,点击复制URL。
将复制的URL粘贴到迅雷进行下载,即可,具体操作过程截图如下:
image.png
image.png
image.png

三、网页播放音乐技术实现

IE音乐播放网页播放音乐这一过程,其具体的技术实现过程的细节猜想如下:

  1. 用户通过IE音乐播放网页向音乐服务器发起播放音乐的请求,询问是否可以连接;
  2. 音乐服务器受到询问是否可以连接的请求后,给用户做出可以连接的应答反馈;
  3. 用户受到可以连接的通知,开始正式连接音乐服务器,这时用户与音乐服务器直接的网络传输连接建立;
  4. 用户利用经由三次握手后建立起来的连接开始从音乐服务器Download音乐数据文件到用户本地(在这一过程中用户和音乐服务器之间应该是一直保持连接的);
  5. 成功将音乐文件完整的Download到用户本地,连接此时不再需要保持,断开连接
  6. 用户开始在用户端对本地音乐数据文件进行解析播放等用户端数据处理操作(这些处理与音乐服务器已经无关了)
    这个过程说明每次用户发起音乐播放请求,都会与音乐服务器进行一次三次握手及建立连接的过程,以前建立的连接在数据传输完毕后立即会断开,不会被保存下来,后续的请求因此无法复用以前建立的连接,只能再去建立新的连接用完再断开。
    这种方式属于短连接。一次会话一次连接,请求和连接的关系属于一对一。
    因为这种场景下,每个请求间的时间间隔是不固定的,可能间隔很短就进行下一次播放音乐的请求,也可能会很久之后才去进行下一次播放音乐的操作。如果连接建立后一直保持,实际上却没有被利用起来,不觉得很浪费么。
    单向的由服务器端向用户传输数据(数据需要保持完整性一次性传输到位)的场景适合用短连接。
    其实这个过程当中还涉及到阻塞的概念:由于用户一次请求向音乐服务器下载一首歌时,必需要保证下载的是完整的一首歌的全部数据,所以在下载的过程是一个等待的过程即被阻塞的过程,会受到网络带宽和计算机处理速度的影响。

    四、长连接

    既然提到短连接,有必要聊聊长连接。
    长连接中请求和连接的关系是多对一的。即以前的请求建立的连接可以被后续请求继续使用,不会断开。
    比如跑步APP实时显示运动轨迹这一场景:用户通过APP向服务器实时显示运动轨迹的请求,用户需要实时上报自己的最新位置信息给服务器,服务器收到后将绘制好的最新运动轨迹返回给用户,双向的数据传输过程。这个过程应该会一直保持连接在线,不会每上报一次就建立一次连接,太麻烦。假设用户每上报一次就建立一次连接,建立连接之前还要经过三次握手,过程太复杂。不如用户第一次与服务器建立建立后,就一直保持连接在线,后续的每次用户上报及服务器返回都复用这个连接。
    因为这个场景下的用户请求是实时的,每个请求之间的间隔几乎可以被忽略,没必要去频繁的重复断开旧连接再去建立新的连接的过程。双向的用户与服务器实时传递数据(数据分段传输,最后汇总整合后形成最终数据)的场景适合用长连接。
目录
相关文章
|
5天前
|
编解码 vr&ar 图形学
Unity下如何实现低延迟的全景RTMP|RTSP流渲染
随着虚拟现实技术的发展,全景视频逐渐成为新的媒体形式。本文详细介绍了如何在Unity中实现低延迟的全景RTMP或RTSP流渲染,包括环境准备、引入依赖、初始化客户端、解码与渲染、优化低延迟等步骤,并提供了具体的代码示例。适用于远程教育、虚拟旅游等实时交互场景。
9 2
|
17天前
|
JavaScript 前端开发 数据安全/隐私保护
Web开发者必看:手把手教你如何轻松播放m3u8流地址,解锁视频播放新技能,让你的项目更上一层楼!
【10月更文挑战第23天】随着互联网技术的发展,m3u8格式因良好的兼容性和高压缩率被广泛用于网络流媒体传输。本文介绍如何在Web端播放m3u8流地址,包括引入视频播放器(如Video.js)、创建播放器容器、初始化播放器及播放m3u8流的具体步骤。此外,还涉及处理加密m3u8流的示例。
58 1
|
4月前
|
数据采集 大数据 Python
FFmpeg 在爬虫中的应用案例:流数据解码详解
在大数据背景下,网络爬虫与FFmpeg结合,高效采集小红书短视频。需准备FFmpeg、Python及库如Requests和BeautifulSoup。通过设置User-Agent、Cookie及代理IP增强隐蔽性,解析HTML提取视频链接,利用FFmpeg下载并解码视频流。示例代码展示完整流程,强调代理IP对避免封禁的关键作用,助你掌握视频数据采集技巧。
FFmpeg 在爬虫中的应用案例:流数据解码详解
|
6月前
|
Web App开发 Windows
FFmpeg开发笔记(十五)详解MediaMTX的推拉流
MediaMTX是开源轻量级流媒体服务器,提供RTSP, RTMP, HLS, WebRTC和SRT服务。启动后,它在不同端口监听。通过FFmpeg的推拉流测试,证明了MediaMTX成功实现HLS流媒体转发,但HLS播放兼容性问题可能因缺少音频流导致。推流地址为rtsp://127.0.0.1:8554/stream,RTMP地址为rtmp://127.0.0.1:1935/stream,HLS播放地址为http://127.0.0.1:8888/stream(Chrome)和http://127.0.0.1:8888/stream/index.m3u8(其他播放器可能不支持)。
772 2
FFmpeg开发笔记(十五)详解MediaMTX的推拉流
|
6月前
|
XML JSON Java
Android App开发即时通信中通过SocketIO在客户端与服务端间传输文本和图片的讲解及实战(超详细 附源码)
Android App开发即时通信中通过SocketIO在客户端与服务端间传输文本和图片的讲解及实战(超详细 附源码)
374 0
|
5月前
|
图形学 异构计算
蓝易云 - Unity下如何实现低延迟的全景RTMP|RTSP流渲染
以上就是在Unity中实现低延迟的全景RTMP/RTSP流渲染的基本步骤。具体的实现可能会根据你的具体需求和所使用的库有所不同。
112 0
|
6月前
|
移动开发 JSON 前端开发
📺搞懂前端流媒体字幕
📺搞懂前端流媒体字幕
|
6月前
|
存储 算法 前端开发
深入理解FFmpeg音视频编程:处理封装、解码、播放 队列与回放策略
深入理解FFmpeg音视频编程:处理封装、解码、播放 队列与回放策略
245 0
|
6月前
|
Linux C++ iOS开发
VLC源码解析:视频播放速度控制背后的技术
VLC源码解析:视频播放速度控制背后的技术
568 0
|
6月前
|
编解码 网络协议 Unix
相较于ffmpeg我更倾向于使用socket实现推流工作
相较于ffmpeg我更倾向于使用socket实现推流工作
139 0