关于音频的自动播放

紫荆棘鸟 · 发表于 2023-9-23 02:25

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？注册

x

@那年夏天昨天问了我这个半瓶子醋关于音乐（进而音乐 and 视频）自动播放问题，我在那夏的两个帖子中东一榔头西一锤子地说了几句，这里将帖子集中整理整理，放这里，方便大家参考、批判。

先说一下，我极少也基本上不会贴音频，连相关的账号也木有（例如 QQ 音乐，网易音乐等），因此楼上说自己是半瓶子醋，实际上还是自己给自己贴金，颇得王婆卖瓜的精髓。欢迎东篱等音频大佬以及程序员们补充批评。

首先咱们来看看以下 html 文件。有兴趣的同学可以将其内容拷贝下来，保留到你电脑某个 html 文件中。例如你可以在你的电脑的
c:/Temp/
目录下建立一个 test-autoplay.html 的空文件，然后用 notepad, notepad++ 等打开 test-autoplay.html 文件，将如下内容拷贝到这个文件中，保存：

<html>
<audio controls autoplay loop src="file://c:/temp/myLocalMusic.mp3" type="audio/mp3" >
</audio>

<br><br>

<audio controls autoplay loop src="https://someCompany.com/somewhere.mp3" type="audio/mp3" >
</audio>

<br><br>

<iframe frameborder="yes" border="0" marginwidth="0" marginheight="0" width=333 height=123
src="https://music.163.com/outchain/player?type=2&id=1960605597&auto=1&height=66">
</iframe>

<iframe frameborder="yes" border="0" marginwidth="0" marginheight="0" width=333 height=123
src="https://music.163.com/outchain/player?type=2&id=1959667347&auto=1&height=66">
</iframe>

紫荆棘鸟 · 发表于 2023-9-23 02:52

我如果用某个浏览器（例如我常用 chrome、fireFox 火狐狸、微软的 Edge)例如 fireFox 打开 test-autoplay.html，我会有如下界面：

好，咱们来逐一考察。
要自动播放，首先得有音乐文件，对吧？所以你得准备或者找到某个音乐文件，例如 myLocalMusic.mp3

注意，楼上的第一个音乐地址 file://c:/temp/myLocalMusic.mp3
是表示音乐文件 myLocalMusic.mp3 存储在你的电脑硬盘里，它告诉你的浏览器这是个电脑中的 file （所以作为测试，你可以将 c:/temp/myLocalMusic.mp3 改成你电脑里任何一个音频文件（外加路径）

一旦你有了音频文件，就可以在浏览器中播放，最简单的（在 html5 中也是最标准的）是用 <audio> 标签，这个标签告诉浏览器：
喂，浏览器您好！请您按照我标签<audio> 中的设置做相应的处理，谢谢您！
浏览器一般老实忠厚，童叟无欺，它会按照你的指令行事的。

这是你的 <audio 标签中的指令/设置，这些称为这个标签的 property：
<audio controls autoplay loop src="file://c:/temp/myLocalMusic.mp3" type="audio/mp3" >
</audio>

controls ：如果有这个标签，那么你的网页中就会有这个界面：

如果你删掉 controls，上述的音乐控制界面就会消失。一般建议加上 controls 这个 property，这时用户就可以手动关停，调整音量等。
autoplay：如果你的 property 中有 autoplay，那么你的音乐会自动播放。如果没有，它就不会自动播放。
loop：循环播放

注：上述代码的第二部分：
<audio controls autoplay loop src="https://someCompany.com/somewhere.mp3" type="audio/mp3" >
</audio>
和第一份没傻区别，唯一的区别就是音频文件的地址：https://someCompany.com/somewhere.mp3, 它告诉浏览器，这个文件在妇联网中，而第一部分则是在你的电脑中。

紫荆棘鸟 · 发表于 2023-9-23 04:00

关于第一部分 & 第二部分，亦即你的 html 文件中指定了 *.mp3 地址的两部分

a）如果能自动播放，那当然，so far so good，任务完成，大家都很高兴，对吧？可能部分嗜酒的同学趁机开瓶二锅头。
b）如果不能自动播放，
b-1）如果不能手动播放，那基本上是因为你的视频音频文件地址不对；
b-2）如果可以手动播放，但不能自动播放，那基本上是因为你的浏览器的设置问题：你的浏览器禁止自动播放。这时你可以通过修改你的浏览器的设置来支持自动播放。具体怎么操作，那就非常因浏览器而异了。
         以火狐狸 firefox 为例，我可以这样操作：
      i) 点击右上角的 settings (设置), 然后在设置版面直接搜寻 autoplay, 或者在左栏 “Privacy and Security"中直接寻找，见以下界面示意图：

         然后点击和 autoplay 对应的 settings
      ii) 然后选择 “AllowAudio and Video",保持。见下图：

紫荆棘鸟 · 发表于 2023-9-23 04:37

好，楼上我们说的是已知音频文件的地址，亦即你知道你的音频文件 ×.mp3 在哪里的情形，这时好办，直接用 <audio> tag 就可以了。

但是请考察这两个例子：

<iframe frameborder="yes" border="0" marginwidth="0" marginheight="0" width=333 height=123
src="https://music.163.com/outchain/player?type=2&id=1960605597&auto=1&height=66">
</iframe>

<iframe frameborder="yes" border="0" marginwidth="0" marginheight="0" width=333 height=123
src="https://music.163.com/outchain/player?type=2&id=1959667347&auto=1&height=66">
</iframe>

第一个例子是拷贝自 @恬静雪雪文章中的音乐，第二个例子是拷贝自那夏的文章中的音乐地址。这两个例子除了地址外，都是一样的，它们应该是网易音乐自动生成的代码。
大家看到没有，这里的地址，例如
https://music.163.com/outchain/player?type=2&id=1960605597并没有直接给出 *.mp3 文件在哪里，对吧？那这个地址对应的 *.mp3 文件到底在哪里呢？
紫荆棘鸟知道吗？不知道！
wyc520.com 知道吗？不知道！
老天爷知道吗？也不知道！
那么谁知道？答案是，只有“网易音乐”知道，更具体点，只有网易音乐 https://music.163.com 中的服务器程序 outchain/player 知道。
outchain/player 根据你提供的参数数值 type （其值 = 2）以及 id（其值=1960605597），就能找出保存在网易云音乐服务器中的 *.mp3 文件，然后播放。这些公司之所以不给出具体的 MP3 文件地址，一个很大的原因就是防止用户下载，等。

这时因为你不知道 *.mp3 文件的直接地址，所以你就没法像前两个例子那样直接用 <audio> tag，来播放音乐，对吧？
那应该如何播放？事实上你除了有求于网易云音乐服务（music.163.com/outchain/player）外，还镇没有办法，因为你连 *.mp3 文件在哪里都懵懵懂懂一问三不知的。特别，这个网站 wyc520.com 也不知道如何播放。

要播放，就只能借助于网易云音乐服务器 music.163.com/outchain/player。
对 wyc520.com 而言，最简单的办法就是：那好吧，你既然坚持要在我这里播放 music.163.com 中的音乐，但我实在不知怎么操作，对不起，我爱莫能助，那我干脆就给你挖个洞，在我的地盘开个框架给你，你自己去联系网易云音乐，你爱怎么着就怎么着，前提是你们所有的活动都得给我老老实实地在我给你划定的框架里进行，不能越界。

这个特辟框架就是由标签 <iframe> 给出。iframe是 inline frame 的简写，意思是内联框架，比如恬静雪雪的代码：
<iframe frameborder="yes" border="0" marginwidth="0" marginheight="0" width=333 height=123
src="https://music.163.com/outchain/player?type=2&id=1960605597&auto=1&height=66">
</iframe>
抛开无关紧要的 frameborder="yes" border="0" marginwidth="0" marginheight="0" 不谈，比较重要的是
width=333 height=123
它是 wyc520.com 给你特批的框架大小，宽 333 像素，高 123 像素。至于这个框架里显示什么，wyc520.com 不知道也不想知道，其内容是由网易音乐：
https://music.163.com/outchain/player?type=2&id=1960605597
决定的。对的，此时轮到网易云音乐粉墨登场了。这个地址附带的其它参数 auto=1&height=66，严格说来，我们都不知道，这里只能根据其参数名称 auto 以及音乐播放的一些功能，“猜测”出 auto 是涉及自动播放与否相关的设置。

紫荆棘鸟 · 发表于 2023-9-23 04:39

恬静雪雪的音乐，在我的火狐狸播放器中是自动播放的（如果不能自动播放，那是你的浏览器设置的问题）
但那夏的音乐，第二个例子，我连手动播放也不成

紫荆棘鸟 · 发表于 2023-9-23 04:57

本帖最后由紫荆棘鸟于 2023-9-23 05:00 编辑

这里顺带说一句，flash
flash 是 Adobe 公司以前开发的产品，也是以前互联网贴音频/视频文件的主要插件。随着互联网的发展，flash 已经逐步被淘汰了，主要原因：
a）效率很差（内存以及 CPU 消耗比较大）
b）不安全，有安全漏洞
多年前 Adobe 就声明，会停止支持 flash。最终 Adobe 于 2020 年 12 月 31 日停止支持 flash。随即所有的主要浏览器，比如微软的 edge，以及 edge 的前身 IE, fireFox, chrome， opera，苹果的 safari 等，都不再支持 flash。flash 贴出的音频视频文件，不能显示。

所以这里贴视频的朋友，最好不要用 flash 贴，因为很多朋友没法打开。

这里有些同学会问：不对呀，我的浏览器怎么支持 flash 啊，而且我的浏览器前不久还更新过，怎么回事？

如果是这种情况，那你的浏览器基本上可以肯定是某些不良公司推出的“浏览器”，比如腾讯的，360 的，等等。
这些公司的“浏览器”，并不是真正的独立的浏览器，而且往往有一个很夸张的名称，例如极速什么的。
这些浏览器其实是微软的 IE （Internet Explorer）浏览器，但加上了自己的一层所谓的应用层面，将 IE 包起来，推销给你，这些应用层面，基本上就是给你提供的一些服务，例如
翻-墙；卖自己的产品；打广告；搜集你的个人信息
等。你最近的更新，是这个应用外壳的更新，但浏览器本身还是老版本的 IE，它并没有更新（因为如果 IE 更新了，或者换成了 Edge, flash 插件是被屏蔽的）

水晶 · 发表于 2023-9-23 06:32

这帖子，技术含量太高了。。

水晶 · 发表于 2023-9-23 06:33

紫紫辛苦了

水晶 · 发表于 2023-9-23 06:35

就送一朵小花花，送多了占屏，别误了需要的朋友看的连贯

紫荆棘鸟 · 发表于 2023-9-23 07:53

水晶发表于 2023-9-23 06:32
这帖子，技术含量太高了。。

问好水晶，我也是现学现卖呢。

帐号		自动登录	找回密码
密码			注册

关于音频的自动播放 [复制链接] (18/380)

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

评分

鲜花鸡蛋

鲜花鸡蛋

鲜花鸡蛋

鲜花鸡蛋

点评

鲜花鸡蛋