【编程底层原理】从播放音乐的网页中提取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向服务器实时显示运动轨迹的请求,用户需要实时上报自己的最新位置信息给服务器,服务器收到后将绘制好的最新运动轨迹返回给用户,双向的数据传输过程。这个过程应该会一直保持连接在线,不会每上报一次就建立一次连接,太麻烦。假设用户每上报一次就建立一次连接,建立连接之前还要经过三次握手,过程太复杂。不如用户第一次与服务器建立建立后,就一直保持连接在线,后续的每次用户上报及服务器返回都复用这个连接。
    因为这个场景下的用户请求是实时的,每个请求之间的间隔几乎可以被忽略,没必要去频繁的重复断开旧连接再去建立新的连接的过程。双向的用户与服务器实时传递数据(数据分段传输,最后汇总整合后形成最终数据)的场景适合用长连接。
目录
相关文章
|
1月前
|
编解码 vr&ar 图形学
Unity下如何实现低延迟的全景RTMP|RTSP流渲染
随着虚拟现实技术的发展,全景视频逐渐成为新的媒体形式。本文详细介绍了如何在Unity中实现低延迟的全景RTMP或RTSP流渲染,包括环境准备、引入依赖、初始化客户端、解码与渲染、优化低延迟等步骤,并提供了具体的代码示例。适用于远程教育、虚拟旅游等实时交互场景。
32 2
|
1月前
|
机器学习/深度学习 前端开发 JavaScript
前端小白也能学会的高大上技巧:如何让你的网页支持语音控制?
【10月更文挑战第31天】你是否曾梦想过只需动动嘴皮子就能操控网页?现在,这个梦想触手可及。即使你是前端小白,也能轻松学会让网页支持语音控制的高大上技巧。本文将介绍语音控制的基本概念、实现方法和具体示例,带你走进语音控制的奇妙世界。通过Web Speech API,你只需掌握基本的HTML、CSS和JavaScript知识,就能实现语音识别和控制功能。快来尝试吧!
147 4
|
1月前
|
JavaScript 前端开发 数据安全/隐私保护
Web开发者必看:手把手教你如何轻松播放m3u8流地址,解锁视频播放新技能,让你的项目更上一层楼!
【10月更文挑战第23天】随着互联网技术的发展,m3u8格式因良好的兼容性和高压缩率被广泛用于网络流媒体传输。本文介绍如何在Web端播放m3u8流地址,包括引入视频播放器(如Video.js)、创建播放器容器、初始化播放器及播放m3u8流的具体步骤。此外,还涉及处理加密m3u8流的示例。
226 1
|
4月前
|
编解码 vr&ar 图形学
惊世骇俗!Unity下如何实现低至毫秒级的全景RTMP|RTSP流渲染,颠覆你的视觉体验!
【8月更文挑战第14天】随着虚拟现实技术的进步,全景视频作为一种新兴媒体形式,在Unity中实现低延迟的RTMP/RTSP流渲染变得至关重要。这不仅能够改善用户体验,还能广泛应用于远程教育、虚拟旅游等实时交互场景。本文介绍如何在Unity中实现全景视频流的低延迟渲染,并提供代码示例。首先确保Unity开发环境及所需插件已就绪,然后利用`unity-rtsp-rtmp-client`插件初始化客户端并设置回调。通过FFmpeg等工具解码视频数据并更新至全景纹理,同时采用硬件加速、调整缓冲区大小等策略进一步降低延迟。此方案需考虑网络状况与异常处理,确保应用程序的稳定性和可靠性。
96 1
|
4月前
|
网络协议 C# 开发者
WPF与Socket编程的完美邂逅:打造流畅网络通信体验——从客户端到服务器端,手把手教你实现基于Socket的实时数据交换
【8月更文挑战第31天】网络通信在现代应用中至关重要,Socket编程作为其实现基础,即便在主要用于桌面应用的Windows Presentation Foundation(WPF)中也发挥着重要作用。本文通过最佳实践,详细介绍如何在WPF应用中利用Socket实现网络通信,包括创建WPF项目、设计用户界面、实现Socket通信逻辑及搭建简单服务器端的全过程。具体步骤涵盖从UI设计到前后端交互的各个环节,并附有详尽示例代码,助力WPF开发者掌握这一关键技术,拓展应用程序的功能与实用性。
150 0
|
6月前
|
图形学 异构计算
蓝易云 - Unity下如何实现低延迟的全景RTMP|RTSP流渲染
以上就是在Unity中实现低延迟的全景RTMP/RTSP流渲染的基本步骤。具体的实现可能会根据你的具体需求和所使用的库有所不同。
115 0
|
7月前
|
移动开发 JSON 前端开发
📺搞懂前端流媒体字幕
📺搞懂前端流媒体字幕
|
7月前
|
Linux C++ iOS开发
VLC源码解析:视频播放速度控制背后的技术
VLC源码解析:视频播放速度控制背后的技术
618 0
|
7月前
|
Web App开发 编解码 监控
RTSP协议探秘:从原理到C++实践,解锁实时流媒体传输之道
RTSP协议探秘:从原理到C++实践,解锁实时流媒体传输之道
2582 0
|
7月前
|
编解码 网络协议 Unix
相较于ffmpeg我更倾向于使用socket实现推流工作
相较于ffmpeg我更倾向于使用socket实现推流工作
160 0

热门文章

最新文章