博客园设置背景音乐【不需要额外服务器或第三方音乐平台】

一、申请侧边公告栏 js 权限(页首和页脚都只支持html)

这里就不详说,这个很多人都有说,百度一下即可。

二、选取音乐

你喜欢的音乐,只要浏览器 Audio 标签支持即。

三、上传音乐文件

在博客园管理界面的上传文件出上传你的音乐,看到关键点了没【之前图片缩放后看不清,我给重新截图了】?文件后缀名不是 mp3 等音乐文件后缀名,而是 .js 有木有!

重点就是在这里,你需要将自己的音乐文件该成这里允许的格式上传即可,然后通过 js 创建 DOM 对象,创建一个 Audio 实例即可使用。

在侧边栏公告代码区域中添加一个 script 标签,标签中代码如下即可:(审查元素 Download 即可看到我们上传的文件路径了。)

    var audio = new Audio(‘https://files.cnblogs.com/files/YMaster/DaneliyaTules-Spectrum.js‘);
    audio.play();
    audio.loop = true;

四、打开自己的博客看看吧!

这里在 Elements 中能看到 audio 标签是因为我的 script 代码如下

    var audio = new Audio(‘https://files.cnblogs.com/files/YMaster/DaneliyaTules-Spectrum.js‘);
    audio.play();
    audio.loop = true;
    window.musicbox.appendChild(audio); // 这里完全可以不需要

注意:这里 new 出来的 audio 对象和我们通过 js 获取到的 audio 标签的 DOM 是一模一样的,所以可以直接插到 DOM 树中,需要注意的是只有 audio 对象是有 Audio 构造函数的,video 是没有的。

   你完全可以多上传几个随机或循环播放,也可以自己写个控制器进行控制让其他人可以控制其播放与否。

   你修改的文件后缀名并不会影响到文件的真实数据的,文件内部的真正数据都是二进制数据【这里浏览器读取的是你的二进制文件并不会关心你是啥后缀名的,它会在你的文件的二进制数据的开头去找文件的解码标准的】,你直接修改文件后缀名而非转换格式的话不会影响到文件原有数据的,后缀名只是方便我们的软件在读取文件时方便识别而已。

原文地址:https://www.cnblogs.com/YMaster/p/9575540.html

时间: 2024-11-11 11:23:04

博客园设置背景音乐【不需要额外服务器或第三方音乐平台】的相关文章

博客园添加背景音乐,背景效果!

目录 博客园添加背景音乐,背景效果 申请博客园JS权限 添加网易云背景音乐 点击鼠标点击样式 二次元看板娘 雪花效果 原文地址:https://www.cnblogs.com/1212dsa/p/11438461.html

博客园设置类似sublime高亮代码

需要用到highlight.js,需要FQ,官网为https://highlightjs.org,首先官网的只有默认主题包,我们需要自定义主题包需要去它的github上找,地址为https://github.com/isagalaev/highlight.js,我用的主题是monokai-sublime.css 所以呢在github上把这个css文件给copy下来,然后把它的js文件也copy下来.上传文件到博客园,不要用官网的cdn,因为样式不能自定义,还要担心哪天地址不能用了 <link r

博客园设置访问数量统计-小试牛刀

当访问到别人的博客时有个访问数量统计是不是觉得很奇妙. 其实设置起来也很简单,就是一个提供统计访问量的小网站,在上面注册使用就行了. 下面我就来记录下我是如何一步做到的: 1.网上搜索方法啦,找到大佬们提供的博客记录,也就是这个网站:http://www.amazingcounters.com 2.打开发现是英文的,没关系,用谷歌网站自带翻译神器,页面一下子就变成可读页面了 3.操作步骤网站上也提供了,总共分三步,第一步选择自己的风格,然后滑到网页底部,点击步骤2按钮 4.然后进行注册,注意这里

在博客园设置访问人数

很简单:首先先 1.先到http://www.amazingcounters.com/sign-up.php   这个地址去申请一个帐户,申请时填写好自己的资料,可以选择访问总量或者人数,如果两个都要的话,貌似要设置两个账户. 2.在上述网站的"Get HTML Code See Statistics"菜单中找到需要添加的HtmLCOde: 3.进入博客园后台管理- > "设置" 选项,在公告编辑栏中添加你的HtmlCode,比如我的是: 1 <div

博客园-设置底部个性化签名格式

设置个性化签名格式,修改成自己喜欢的内容,使我们的签名与众不同,把代码贴在“页面定制CSS代码”框中,当然你可以修改代码,改变样式,代码如下: 页面定制CSS代码: /* 设置签名格式 定制css样式 */ #MySignature { display: none; background-color: #B2E866; border-radius: 10px; box-shadow: 1px 1px 1px #6B6B6B; padding: 10px; line-height: 1.5; te

博客园设置自定义页面样式

首先是背景图片,这个修改对模版而言都是通用的 body { background:url('URL') no-repeat top center fixed;} 这里图片路径可以上传到博客本地图片,图片就有了网上路径 然后是正文模块在整体背景中的浮动 #home { margin:0px auto; width:1000px; } 一个控制模块顶部和背景距离 一个控制模块和宽度{当页面缩放的宽度远远小于你设定的宽度,右边搜索框及其他组件都会移动到底层,不利于使用,最好设置一个合适的宽度} 正文模

博客园背景音乐调用,通吃网易云音乐、虾米

单调的文字怎么行,让音乐为你的博文加点料.什么?你写的是技术型博客不搞这么多文艺,大叔,技术型博客也可以很文艺的诶. 今天下三分,网易云.虾米.所有的XX音乐各占据了国内的音乐市场,不过要论曲库哪家全,网易云虾米撕破脸.所以呢,要想博客加上稳定的音乐外链,就在这两者之间选择吧. 在网站上选择合适的背景音乐并外链 何为“合适的背景音乐”呢?首先是前奏不要太唐突,不然网友一打开你的博客就是“咚咚咚”的声音,撸管到一半犯心脏病怎么办?其次就是曲调柔和,柔和的曲调可以使听众最大化,因为大部分人对这种音乐

【转载】博客园背景音乐调用,让音乐为你的博文加点料

[转载]博客园背景音乐调用,让音乐为你的博文加点料 单调的文字怎么行,让音乐为你的博文加点料.什么?你写的是技术型博客不搞这么多文艺,大叔,技术型博客也可以很文艺的诶. 今天下三分,网易云.虾米.所有的XX音乐各占据了国内的音乐市场,不过要论曲库哪家全,网易云虾米撕破脸.所以呢,要想博客加上稳定的音乐外链,就在这两者之间选择吧. 在网站上选择合适的背景音乐并外链 何为“合适的背景音乐”呢?首先是前奏不要太唐突,不然网友一打开你的博客就是“咚咚咚”的声音,撸管到一半犯心脏病怎么办?其次就是曲调柔和

博客园为自己首页添加背景音乐

以网易云音乐为例: 选歌点击生成外链播放器会跳转到iframe找到下面的那段HTML代码,并复制那段代码 并将开头的iframe frameborder="no"替换成 embed 最后面的iframe也替换成 embed,将代码粘贴到博客园设置-首页HTML代码框保存. auto=1 为自动播放,0为不自动播放 改完是这样的: