对如何在博客园中添加音乐播放器及设置自动播放的研究

原创

已于 2023-01-15 23:55:08 修改 · 1.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #chrome

于 2023-01-15 03:50:40 首次发布

文章讲述了如何在博客中使用Aplayer和Meting音乐播放器，并针对Chrome浏览器的自动播放限制，提出通过JavaScript定时触发播放和暂停功能的解决方案，以实现用户交互后的自动播放和正常控制音乐播放。

一. 如何播放音乐

首先打开设置博客后台设置页面，我们要先申请 js 权限，大概一个小时就会通过。

对于播放音乐，我们可以使用 Aplayer 音乐播放器，在页脚HTML中添加如下代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/zouwangblog/APlayer.min.js"></script>
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

CHTXRT

关注关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

给自己的博客园添加网抑云音乐播放器

fantasyfzg的博客

11-08

910

给自己的博客园添加网抑云音乐播放器

博客园添加背景音乐以及播放器或在左下方固定位置添加音乐播放器 给你的博文锦上添花，增姿添彩

IT赵云的博客

12-19

6553

上代码！  <div id="player" class="aplayer"></div> <link href="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.css" rel="stylesheet"> <script src="https://files.cnblogs.com/files/shwee/APlayer.min_v1..

3 条评论您还未登录，请先登录后发表或查看评论

3 条评论

YukyoSama 2023.04.16
网页加载完毕后点击就没用了，只有加载过程点击才行，这是什么问题呀
- YukyoSama回复CHTXRT 2024.01.25
  就是点击实现自动播放
- CHTXRT回复YukyoSama 2023.05.12
  “沒用了”是指？

博客园自定义设计（一）添加音乐播放器

weixin_30855099的博客

06-29

284

还记得第一次接触可以自定义代码的博客是新浪和QQ空间。不过现在都已经被禁了。突然发现博客园还是这么朴实，业界良心。好吧，重温下小时候逃课上网的感觉。一、开通JS权限要想实现很多自己喜欢的效果，js是必不可少的。点击设置>定制代码，需要邮件申请，ok，我们发送邮件，等待可爱的管理员们给我们审核开通。二、自定义音乐高中时候用新浪博客和QQ空间的时候，宁可什么模块...

博客园样式美化：给博客添加一个音乐播放器

weixin_30726161的博客

02-14

589

效果展示代码　　博客园管理 -> 设置 -> 页脚HTML代码　　把下面的代码粘贴上就ok了！ 1 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css"> 2 <...

博客园背景音乐调用，让音乐为你的博文加点料

weixin_34062469的博客

08-02

252

　　单调的文字怎么行，让音乐为你的博文加点料。什么？你写的是技术型博客不搞这么多文艺，大叔，技术型博客也可以很文艺的诶。　　今天下三分，网易云、虾米、所有的XX音乐各占据了国内的音乐市场，不过要论曲库哪家全，网易云虾米撕破脸。所以呢，要想博客加上稳定的音乐外链，就在这两者之间选择吧。在网站上选择合适的背景音乐并外链　　何为“合适的背景音乐”呢？首先是前奏不要太唐突，不然网友一打...

博客园美化——添加Apalyer音乐播放器

通用代码技术

05-19

1662

博客园美化——为博客园添加Aplayer音乐播放器

博客园主题样式，添加背景音乐，鼠标点击等样式设置

个人记录

05-17

839

博客园主题样式，添加背景音乐，鼠标点击等样式设置

博客背景音乐播放器

潇湘博客

01-06

1986

博客背景音乐播放器博客背景音乐播放器博客播放器博客播放器代码博客播放器下载163博客播放器博客播放器代码新浪博客播放器网易博客播放器新浪博客播放器代码网易博客播放器代码免费博客播放器博客播放器下载163博客播放器51博客播放器搜狐博客播放器转载请注明出处。

BLOG中插入音乐播放器

p@Blog

05-18

7709

进入控制面板，点击“首页内容维护”，在“自定义空白面板”中，新增一个空白面板，勾选“源代码”后，粘贴以下代码： loop="false" autostart="false"> 或者用这个代码：上面这个长，但比较实用，能自动调网上的插件，几乎的音乐视频都播注意:http://后面的是歌曲的URL地址.在这我随便写的,你可以换成你喜欢的音乐,但必须是URL,就是搜索音乐后点右键看它的属性.

个人博客的APlayer音乐播放器

weixin_50582284的博客

02-14

1285

个人了博客的APlayer音乐播放器

为博客添加一个小音乐播放器

我爱吃红薯的博客

11-11

890

1，引入3行js,css <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"> <script src="http://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script> <script src="http://cdn.jsdelivr

Emlog个人博客音乐播放器插件

黑风leisure

04-28

2417

后台支持自定义歌曲歌曲支持网易和QQ 歌曲填写ID即可播放器支持欢迎语播放器支持https 支持全局ajax 插件下载:https://wuzuhua.cn/2019/04/28/bfqcj.html

hexo博客主题next美化增加简易音乐播放器和看板娘

kaihang_cai的博客

09-07

620

增加简约音乐播放器，在某个地方，如 themes/next/layout/_macro/sidebar.swig 加入以下代码...

在博客中实现播放音乐功能（QQ，网易，酷狗，虾米，百度）

如诗

09-16

556

【代码】在博客中实现播放音乐功能（QQ，网易，酷狗，虾米，百度）于20240713更新依赖URL

想给自己的博客页面整合一个音乐播放器嘛

Adger

08-17

674

利用Aplyer和mettingJS的整合什么是Aplyer：一款可爱，漂亮的Js音乐播放器，开源，免费使用，在我另一篇博客已经介绍了他的简单使用什么Meting：MetingJs基于Aplayer插件封装好的插件，开箱即用。详细API跟文档可以看官网 Aplayer官网文档：https://aplayer.js.org/ Metingjs官网文档：https://github.com/metowolf/MetingJS Demo演示 <!DOCTYPE html> <html la

博客园添加背景音乐

weixin_30670965的博客

09-15

264

转载自：博客园背景音乐调用，让音乐为你的博文加点料转载于:https://www.cnblogs.com/sylar5/p/7526752.html

博客园添加单曲背景音乐

兮动人

07-12

760

博客园的自定义 css 、js背景的功能确实不错。还可以添加背景音乐啥的。首先在博客园的后台设置那里申请到 js 的权限才能插入播放器的代码，申请理由充分一点才能被审核通过，审核时间一两天。开通以后就可以使用js代码进行装饰了添加网易云背景音乐，登录到web版网易云的界面，播放要添加的单曲，点击后来到歌曲的主页，生成外链播放器复制下面的代码把上面代码的 <iframe>标签换成 <embed>，这里注意的是 <embed> 是单标签，换成.

音乐播放器