对在博客园中播放音乐及设置其自动播放的研究

一. 如何播放音乐

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

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

<link rel="stylesheet" href="http://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src="http://style4.7lz.top/blog-static/cnblogs/files/zouwangblog/APlayer.min.js"></script>
<script src="http://unpkg.com/meting@1.2/dist/Meting.min.js"></script>
<div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="8057140928" data-server="netease" data-type="playlist" data-order="random" data-autoplay="true" data-volume="0.6" data-fixed="true" data-listfolded="true" data-theme="orange"></div>  <!-- 播放器相关设置 -->

其中在div id="player" class=....一行中,data-id=...之后的是设置,格式为xxx="" ,具体介绍如下:

data-id:歌曲/专辑/歌单对应的id
data-server:音乐平台,可以为 netease(网易云音乐)、tecent(qq音乐)、xiami(虾米音乐)、kugou(酷狗音乐)
data-type:请求类型,可以为 song(单曲)、album(专辑)、playlist(歌单)
data-order:播放模式,可以为 random(随机)、single(循环单曲)、circulation(列表循环)、order(顺序播放)
data-autoplay:是否自动播放,true(是)或 false(否)
data-volume:默认音量,播放器会记忆用户设置,只要用户改过一次音量就这一项就无效了
data-fixed:是否开启吸底模式
data-listfolded:歌曲列表是否默认折叠
data-theme:主题色,也可以#RGB

将代码添加进页脚 HTML 之后,我们就可以在博客上看到音乐播放器了,但是,我们会发现,无论上面的data-autoplay设置成 true 还是 false,打开博客时都不能自动播放音乐,这个问题我搜索后并没有找到合适的解决方案。

二. 如何设置自动播放

我们在博客中点击F12打开开发者工具,就可以在控制台看到 warning:

大意是:“播放错误,因为用户还没有首先接触网页”,这是因为谷歌于2018年4月更改(禁止)自动播放的规定,我们不能在用户已与域进行了交互(单击,点击等)之前播放任何带声音的文件。

为了完成自动播放的目的,我们需要另辟蹊径,跟 chrome 打游击战,时不时骚扰一下浏览器,问问它能不能播放,代码如下:

<script> 
let ref = setInterval(function(){	//每隔2秒尝试播放一次
    isaplay();
},2000);
function isaplay(){
	$(".aplayer-play").click()	//尝试播放
}
</script>

将这堆代码加到页脚HTML,我们发现,自动播放的问题解决了,但又没完全解决,但至少现在用户只要任意点击一下页面或者任意按键就可以自动播放了,但是却又出现了新的问题,我们发现用户暂停不了音乐了,只要一点暂停,很快音乐就会继续播放。观察HTML代码后发现,当播放器处于播放状态时元素aplayer-button aplayer-play会变成aplayer-button aplayer-pause,于是我们检测通过检测.aplayer-pause是否存在来关闭Interval,更改后的代码如下:

<script> 
let ref = setInterval(function(){	//每隔2秒尝试播放一次
    isaplay();
},2000);
function isaplay(){
	$(".aplayer-play").click()	//尝试播放
	if($(".aplayer-pause").length > 0){    //`aplayer-button aplayer-pause`是否存在
        clearInterval(ref);		//停止Interval,即停止循环
    }
}
</script>

但是我惊奇的发现,音乐还没有开始播放,isaplay()却只运行了一次就歇菜了,起初我还以为aplayer-button aplayer-pause是被藏起来了,实质上是存在的,但是后来F12翻遍了文件也没有找到aplayer-button aplayer-pause的踪迹,后来我突然想到,会不会是因为,当$(".aplayer-play").click()执行的时候,浏览器并没有从一开始就拦截住它,而是让他成功地将元素aplayer-button aplayer-play变成了aplayer-button aplayer-pause(即便很快就恢复了过来),在这很短的时间内,判断执行了,aplayer-button aplayer-pause在那几十毫秒内刚好存在,$(".aplayer-pause").length > 0导致clearInterval(ref)执行。HTML元素变化与JS代码执行异步,就是isaplay()只运行了一次就歇菜的罪魁祸首。于是我根据上述推断改进代码如下:

<script> 
let ref = setInterval(function(){	//每隔2秒尝试播放一次
    isaplay();
},2000);
function isaplay(){
    $(".aplayer-play").click()	//尝试播放
    setTimeout(function() {		//延时100毫秒再执行其内部的判断
        if($(".aplayer-pause").length > 0){    //`aplayer-button aplayer-pause`是否存在
        clearInterval(ref);		//停止Interval,即停止循环
    }}, 100);
}
</script>

果然,改进后用户还是只要任意点击一下页面或者任意按键就可以自动播放,并且音乐也可以正常暂停或播放,问题基本解决,但还是期待能有大佬给出更为完善的方案。

在这次实践中,我在解决问题的过程中也查阅了许多资料,同时还学习了一下基本的 js 语法(其实我对JS基本上一窍不通,所以上面有些用语并不规范),只能笑说自己是“做中学”了 (*^_^*) 。

以上内容仅供参考,水平不高,大佬见笑。
下一篇文章:[代码Show]第一期- Calendar ——CSDN
再下一篇文章:从0开始学杂项 第一期:什么是杂项 ——CSDN(强烈推荐)


作者:CHTXRT

出处:http://www.cnblogs.com/chtxrt/

本站使用「CC BY-SA 4.0」创作共享协议,转载请在文章明显位置注明作者及出处。

本文转载于网络 如有侵权请联系删除

相关文章

  • MindSpore尝鲜之Vmap功能

    技术背景Vmap是一种在python里面经常提到的向量化运算的功能,比如之前大家常用的就是numba和jax中的向量化运算的接口。虽然numpy中也使用到了向量化的运算,比如计算两个numpy数组的加和,就是一种向量化的运算。但是在numpy中模块封装的较好,定制化程度低,但是使用便捷,只需要调用最上层的接口即可。现在最新版本的mindspore也已经推出了vmap的功能,像mindspore、numba还有jax,与numpy的最大区别就是,需要在使用过程中对需要向量化运算的函数额外嵌套一层vmap的函数,这样就可以实现只对需要向量化运算的模块进行扩展。用一个公式来理解向量化运算的话就是:a_1+b_1=c_1\\ a_2+b_2=c_2\\ .\\ .\\ .\\ a_n+b_n=c_n\\ \Downarrow\\ \vec{a}+\vec{b}=\vec{c} 安装最新版MindSpore关于jax中的vmap使用案例,可以参考前面介绍的LINCS约束算法实现和SETTLE约束算法批量化实现这两篇文章,都有使用到jax的vmap功能,这里我们着重介绍的是MindSpore中最新

  • 50行Python代码实现代理服务器

    这里的代理服务器,是指二级代理服务器。比如:A可以访问B,B可以访问C,A不能直接访问C。这时,如果在B开一个二级代理,就可实现A访问C。现有的工具有CCProxy。这里就是使用Python简单的实现一个二级代理。#coding=utf-8 importsocket importselect importsys importthreading importtime importlogging importos logsDir="logs" ifnotos.path.isdir(logsDir): os.mkdir(logsDir) logging.basicConfig(level=logging.DEBUG, format='%(asctime)s%(filename)s[line:%(lineno)d]%(levelname)s%(message)s', datefmt='%a,%d%b%Y%H:%M:%S', filename='logs/logs.log', filemode='a&#x

  • No.120 Python:四种执行系统命令的方法

    1、os.system(cmd)在子终端运行系统命令,可以获取命令执行后的返回信息以及执行返回的状态执行后返回两行结果,第一行是结果,第二行是执行状态信息importos os.system("date") #2018年4月8日星期日19时29分13秒CST #运行状态号,0表示正确 #0复制2、os.popen(cmd)不仅执行命令而且返回执行后的信息对象(常用于需要获取执行命令后的返回信息),是通过一个管道文件将结果返回importos nowtime=os.popen("date") print(nowtime.read()) #2018年4月8日星期日19时30分35秒CST复制3、commands模块(被subprocess取代)方法说明getoutput获取执行命令后的返回信息getstatus获取执行命令的状态值(执行命令成功返回数值0,否则返回非0)getstatusoutput获取执行命令的状态值以及返回信息importcommonds status,output=commands.getstatusoutput(&quo

  • 2-HTML的标签

    文本标签段落标签<p></p>段落标签用来描述一段文字标题标签<hx></hx>标题标签用来描述一个标题共有6个级别,高到低,h1,h2,h3,h4,h5,h6<h1></h1>标签在每个页面中通常只出现一次强调语句标签<em></em>用于强调某些文字的重要性更加强调标签<strong></strong>和<em></em>一样,用于强调文本,但它强调的程度更强一些无语义标签<span></span><span></span>标签是没有语义。短文本引用标签<q></q>简短文字的引用长文本引用标签<blockquoto></blockquoto>定义长的文本引用换行标签<br/><br/>标签作用相当于word文档中的回车,起到文字换行的作用多媒体标签链接标签<a></a>图片标签<img/&g

  • shell入门第十讲

    1、Linux标准流在Linux中, 标准输入 是标准输入流,这接受文本作为其输入,我们看到的stdin就是标准输入流之意(也称为输入重定向)。从命令到shell的文本输出是通过 标准输出 (标准输出)流,stdout就是标准输出流之意(也称为输出重定向),来自命令的错误消息通过发送 标准错误 (标准错误)流,比如stderr就是标准错误流之意(也称为错误重定向)。我们之前给大家介绍过,一个命令不管执行成功与否,都会产生一个状态值,这个值如果是0,就表示命令执行成功了,如果是1~255之间的任意一个数字,均表示执行失败。那么在Linux标准流中,stdout和stderr也同样如此。如果我们使用了Linux标准流的功能,当我们执行一个命令成功后,那么终端打印的信息也将会被传送至stdout中。当我们执行命令失败后,那么终端打印的报错信息也将会被传送至stderr中。1.1、stdout输出重定向我们一般使用 >来表示,比如将信息输出重定向到一个文件中。举一个例子来说明一下:bash[root@master1~]#echo"thisisainformation"

  • cmd命令查看已连接的WiFi密码

    实验环境:Windows10、命令提示符(管理员权限)一、CMD命令查看WiFi密码使用方法:1、运行CMD(命令提示符)(确保无线网卡启用状态) 2、输入命令查看WiFi配置文件:#列出所有连接过的WiFi的配置文件 netshwlanshowprofiles #查看到某个具体WiFi的配置详情,包括密码: netshwlanshowprofilesname="XXXXXX"key=clear #XXXXXX代替自己的WiFi名称即可复制二、图形界面查看WiFi密码 关注不迷路↓

  • SAP Marketing Cloud的Contact导入配置和数据合并原理

    SAP很多系统的主数据都支持从外部系统导入,SAPMarketingCloud也是如此,contact主数据可以来自HybrisCommerce,CRM,ERP或者Twitter,Facebook等社交媒体。来自不同渠道的contact可能对应的是真实世界里同一个人,那么就存在一个过程,该过程的逻辑是将不同渠道的contact数据进行整合,拼凑出一个包含完整信息的contact主数据存储到MarketingCloud系统里,这个拼凑的过程称之为合并(merge),拼凑后形成的完整Contact结构称为Goldenrecord。下面这张示意图里的蓝色圆环称为Mainfacet,代表每个contact数据在某个源系统上的ID,比如在ERP系统上的ID为123,在Twitter上的ID为456等等。而黄色圆环是contact在各自源系统里的属性,比如在Twitter网站上ID为456的一个contact,其name属性为jerrywang@sap。黄色圆环称之为additionalfacet.通过在SAPMarketingCloud里进行一系列配置,告诉系统,当检测到来自不同数据源的cont

  • 我的第一个caffe C++程序

    最近一段时间一直在考虑为浏览器添加AI过滤裸露图片的功能,但目前大多数AI相关的教程都是用python语言。如果是训练模型,使用python语言无疑是最合适的,但现在的需求是嵌入到产品中,必须要使用C++,为此特意比较了现在比较流行的深度学习框架,发现caffe比较契合需求。caffe本身使用C++语言开发,提供了丰富的C++API,也提供了很多C++的示例。值得一提的是,雅虎提供了开源的色情图片检测模型open_nsfw,采用的正是caffe深度学习框架。因此我的目标是将open_nsfw集成到产品中。研究了一番caffe示例和网上的一些教程,发现各有千秋,不同的模型,代码总有一些差异,真正尝试运行时,总有这样那样的问题。最后还是决定从最基本的模型入手,编写并运行一个caffe程序,并能够真正跑起来。其实网上和书本上都有很多caffeC++的例子,但是真正自己编译运行是总会碰到这样或那样的问题。究其原因,主要是AI是一个新的领域,变化非常快,可能之前能够编译运行的代码,在新的版本上需要稍做修改才行。其次是环境的不同,比如我使用的是带GPU支持的caffe,结果编译遇到问题,网上就没有

  • Java虚拟机(七):JVM调优案列

    Eclispe启动优化概述  什么是jvm调优呢?jvm调优就是根据gc日志分析jvm内存分配、回收的情况来调整各区域内存比例或者gc回收的策略;更深一层就是根据dump出来的内存结构和线程栈来分析代码中不合理的地方给予改进。eclipse优化主要涉及的是前者,通过gc日志来分析。本文主要是通过分析eclipsegc日志为例来示例如何根据gc日志来分析jvm内存而进行调优,像根据关闭eclipse启动项、关闭各种校验等措施来优化eclipse本文不再阐述,网上有很多,本次测试的eclipse已经进行了配置上面的优化。准备环境eclipse版本:Release4.5.0eclipse默认配置:eclipse.ini-startup plugins/org.eclipse.equinox.launcher_1.3.100.v20150511-1540.jar --launcher.library plugins/org.eclipse.equinox.launcher.win32.win32.x86_64_1.1.300.v20150602-1417 -product org.eclips

  • 【机器学习数学基础】线性代数基础

    线性代数一、基本知识本书中所有的向量都是列向量的形式: \[\mathbf{\vecx}=(x_1,x_2,\cdots,x_n)^T=\begin{bmatrix}x_1\\x_2\\\vdots\\x_n\end{bmatrix}\]本书中所有的矩\(\mathbfX\in\mathbbR^{m\timesn}\)都表示为: \[\mathbfX=\begin{bmatrix}x_{1,1}&x_{1,2}&\cdots&x_{1,n}\\x_{2,1}&x_{2,2}&\cdots&x_{2,n}\\\vdots&\vdots&\ddots&\vdots\\x_{m,1}&x_{m,2}&\cdots&x_{m,n}\\\end{bmatrix}\]简写为\((x_{i,j})_{m\timesn}\)或\([x_{i,j}]_{m\timesn}\)。矩阵的F范数:设矩\(\mathbfA=(a_{i,j})_{m\timesn}\),则其F范数为\(||\mathbfA||_F=\

  • 在python中使用csv读写CSV 原

    1.一般读写方式#读取csv文件 importcsv withopen('some.csv','rb')asf:#采用b的方式处理可以省去很多问题 reader=csv.reader(f) forrowinreader: #dosomethingwithrow,suchasrow[0],row[1] importcsv withopen('some.csv','wb')asf:#采用b的方式处理可以省去很多问题 writer=csv.writer(f) writer.writerows(someiterable)复制2.字典读写方式#读 importcsv withopen('names.csv')ascsvfile: reader=csv.DictReader(csvfile) forrowinreader: print(row['first_name'],row['last_name']) #写 importcsv withopen

  • 教程 | 22分钟直冲Kaggle竞赛第二名!一文教你做到

    选自微软机器学习博客机器之心编译参与:陈韵竹、路雪本文介绍了如何使用微软DVSM、利用迁移学习技术在20多分钟时间内达到Kaggle猫狗识别竞赛的第二名的性能。引言几周前,我写了一篇博客《deeplearningandcomputervisionintheMicrosoftAzurecloud》,简要介绍了微软的数据科学虚拟机(DVSM)。本文更偏重实际操作,缘起于PyImageSearch读者Kostas给我发来的一封邮件:「你好,Adrian!我对Kaggle竞赛(特别是计算机视觉领域的Kaggle竞赛)很感兴趣。我在计算机视觉和机器学习/深度学习方面有一些经验,但经验尚不丰富。请问参加这个比赛值得吗?我有没有和其他选手竞争对抗的实力?」Kostas,这是个好问题——我敢肯定,有类似疑问的不止你一个人。让我来用一个故事回答你的问题吧:当我第一次着手编写我的新书《DeepLearningforComputerVisionwithPython》时,我的目标是写一本能同时面向新手、有经验的研究人员和从业者的书/自学项目。那本书从神经网络和机器学习的基础出发,当你根据此书自学到最后时,你就

  • PG学习初体验--源码安装和简单命令(r8笔记第97天)

    其实对于PG,自己总是听圈内人说和Oracle很相似,自己也有一些蠢蠢欲动学习的想法,从我的感觉来看,它是介于Oracle和MySQL之间的一种数据库,具备类似Oracle的功能,兼具MySQL的开源风格。所以个人感觉无论是从Oracle转向学习PG,还是从MySQL转向PG都会有一些独到的侧重方向。当然学习数据库本身不是目的,会的越多并不能说明你很牛,能够深入理解数据库,就如同感受的性格和处事风格,在合适的场景使用它,无想应该是超越于技术本身之外,而且难能可贵的。 其实我本身也是一个浮躁的人,不喜欢全表扫描式的学习,很多东西都不喜欢按照那种系统的方式来学习,很多东西都想先问问,或者走捷径最好。如果一个坎绕过去了,我喜欢再绕回去反复走走。所以在快下班的时候,专门抽了不到一个小时的时间,在同事的帮助下完成了PG的安装。 当然本来是想简单安装一下PG,简单了解一下,结果最后竟然尝试成功了源码安装。 如果网络允许,完全可以使用wget来下载,或者到官网离线下载。 #wgethttps://ftp.postgresql.org/pub/source/v9.5.2/postgresql-9.5.

  • Redis 错误:Failed with result &#39;start-limit-hit&#39;

    Redis错误:Failedwithresult'start-limit-hit' 背景 Redis版本为5.0.4; 文件/etc/systemd/system/redis.service内容如下: [Unit] Description=RedisDatastoreServer After=network.target [Service] Type=forking PIDFile=/var/run/redis/redis_6379 User=redis Group=redis Environment=statedir=/var/run/redis PermissionsStartOnly=true ExecStartPre=/bin/mkdir-p${statedir} ExecStartPre=/bin/chown-Rredis:redis${statedir} ExecStart=/usr/local/bin/redis-server/etc/redis/redis.conf--supervisedsystemd ExecReload=/bin/kill-USR2$MAINP

  • redis info 命令详解

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt119 RedisInfo命令以一种易于理解和阅读的格式,返回关于Redis服务器的各种信息和统计数值。   通过给定可选的参数section,可以让命令只返回某一部分的信息:   server:一般Redis服务器信息,包含以下域:   redis_version:Redis服务器版本 redis_git_sha1:GitSHA1 redis_git_dirty:Gitdirtyflag os:Redis服务器的宿主操作系统 arch_bits:架构(32或64位) multiplexing_api:Redis所使用的事件处理机制 gcc_version:编译Redis时所使用的GCC版本 process_id:服务器进程的PID run_id:Redis服务器的随机标识符(用于Sentinel和集群) tcp_port:TCP/IP监听端口 uptime_in_seconds:自Redis服务器启动以来,经过的秒数 uptime_i

  • Git 删除本地仓库

    rm -rf .git   删除仓库文件夹下隐藏的.git文件夹

  • 软件的安装与破解

    wamp环境下安装thinkphp5.1 https://blog.csdn.net/piaolingjijie/article/details/79121249 NavicatPremium12安装与破解 https://blog.csdn.net/WYpersist/article/details/86530973 Phpstorm2019最新激活码activationcode https://blog.csdn.net/qq_33733970/article/details/86751838 http://idea.medeming.com/jet/ 链接:https://pan.baidu.com/s/1cEKrmZ1s5tlHZ1KWL8IJ0w 提取码:69ee  博客园自定义模板 https://www.cnblogs.com/ECJTUACM-873284962/p/8470554.html https://www.cnblogs.com/zhaoyu1995/p/5876327.html、   Xshell7破解版 https://www

  • OGNL的使用

       访问Action中的普通属性: <s:property value="loginname"/><br/>    访问Action中的对象属性: <s:property value="user.birthday"/><br/>    访问Action中的Set属性: <s:property value="courseSet.toArray()[0]"/><br/>    访问Action中的List属性: <s:property value="list[0]"/><br/>    访问Action中的Map属性的键: <s:property value="map.keys.toArray()[1]"/><br/> &

  • 专访Linux嵌入式开发韦东山操作系统图书作者--转

    CSDN学院讲师韦东山:悦己之作,方能悦人 发表于2015-04-2808:09| 6669次阅读|来源CSDN| 24 条评论|作者夏梦竹 专访Linux嵌入式开发韦东山操作系统图书作者 摘要:从一名资深的软件工程师到图书作者,再到百问科技缔造者,韦东山这一路走来,也有自己的辛酸感悟;但不论何时,他从未忘记学习,用他的话说:“悦己之作,方能悦人”。 【编者按】韦东山,深圳百问网科技有限公司技术创始人,毕业于中国科学技术大学,电子、软件专业双学位,擅长ARM/MIPS等架构的Linux开发,10余年嵌入式开发经验。多家知名培训机构特邀讲师,著有《嵌入式Linux应用开发完全手册》一书。同时,他还是CSDN学院知名讲师(视频),成功录制了50+嵌入式Linux教学视频,好评率100%。 用他的话说:“悦己之作,方能悦人”。 近日,韦东山老师接受了CSDN的专访,文中他分享了学习嵌入式Linux方面的技术经验,并给开发者指明了一道通向未来的灯塔。   用东山老师的话说:“悦己之作,方能悦人”。    CSDN:请先简单

  • 博客地址。

    www.and-who.cn

  • 国产单片机

    北京兆易创新 上海灵动微电子 华大半导体 台湾合泰半导体(Holtek) 台湾新唐科技 台湾松翰科技

相关推荐

推荐阅读