css怎样添加音乐,给博客空间添加CSS3音乐播放器的例子
CSS3音乐播放器可以实现加载外部音乐地址然后在博客或空间中直接播放音乐了,这个效果在许多个人博客会有看到,我们下面来看配置方法。
这是一个很简单的播放器效果,界面主要利用CSS3的一些属性,如animate、translate、transform等,效果则利用Html5 Audio属性配合JS实现。播放器相对简洁且未实现列表播放、音量控制、歌词展示等相对复杂的功能,如需实现诸如酷狗音乐的播放器效果,请深入研究Audio。个人认为,该播放器足以满足博客等非音乐网站的需求。当然,诸如以往,以上包括这句都是废话:)
关于Audio
audio标签定义声音,比如音乐或其他音频流。支持HTML5中的全局属性和事件属性。可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。如:
您的浏览器不支持 audio 标签。
1
属性 值 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。
如果使用 "autoplay",则忽略该属性。
src url 要播放的音频的 URL。
以上内容,你都可以在w3school看到,而以下内容,你只能在这里看到了(^-^)V
HTML结构
CSS样式
.myMusic{
display: block;
width: 55px;
height: 55px;
border-radius: 100%;
position: relative;
}
.myMusic:after{
display: block;
content: '\f001';
width: 55px;
height: 55px;
font-family: 'FontIcon';
text-align: center;
font-size: 25px;
line-height: 55px;
position: absolute;
top: 0;
left: 0;
}
.myMusic .circle{
display: block;
width: 50px;
height: 50px;
border-radius: 100%;
border: 5px solid rgba(0,0,0,0);
border-top-color: #78dc1e;
border-bottom-color: #78dc1e;
position: absolute;
left: 0;
box-shadow: 0 0 35px #6ffe11;
}
.play{
-webkit-animation: Circle 1s ease-in-out infinite;
animation: Circle 1s ease-in-out infinite;
}
.pause{
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
@-webkit-keyframes Circle {
from{ -webkit-transform: rotate(0deg); }
to{-webkit-transform: rotate(360deg);}
}
@keyframes Circle {
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
JAVASCRIPT
//音乐路径
var musicSrc = 'http://yinyueshiting.baidu.com/data2/music/134379562/10494647255600128.mp3?xcode=f9439132fa6a4fdb3143226ac1c6712284958927e6b1be18';
var audio = null;
function setAudio(){
audio = document.createElement('audio');
audio.src = musicSrc;
if(!audio){
audio.load(); //加载音乐
}else{
audio.play();
audio.loop = true; //循环播放
}
}
var musicBtn = $('.myMusic');
var $music = musicBtn.find('.circle');
//控制
musicBtn.off().on('click',function(){
if($music.hasClass('play')){ //如果已经播放,则暂停
audio && (audio.pause());
$music.addClass('pause').removeClass('play');
}else{
audio && (audio.play());
$music.addClass('play').removeClass('pause');
}
});
//页面加载后执行
window.onload = function(){
setAudio();
}
css怎样添加音乐,给博客空间添加CSS3音乐播放器的例子相关推荐
- css文件插入背景音乐,博客园添加背景音乐,背景效果!
博客园添加背景音乐,背景效果 申请博客园js权限 申请话术 实例 尊敬的博客园管理员: 请求申请开通js权限,希望能够把自己的博客修饰的漂亮点,点缀自定义js插件效果,希望管理员可以批准,谢谢! 开通 ...
- 博客园添加背景音乐以及播放器 或在左下方固定位置添加音乐播放器 给你的博文锦上添花,增姿添彩
官方教程:https://aplayer.js.org/#/zh-Hans/ 一.第一种样式 这种你想添加多少音乐就添加多少音乐! 将下方代码复制到博客侧边栏! 话不多说! 上代码! <!-- ...
- 如何在博客中添加Aplayer音乐播放器
前言 是否有一首音乐,前奏一响起,让你灵魂不自主的颤栗.音乐就像老胶卷,每个旋律,每句歌词,都承载着每个人的往事回忆和情愫感受. 我收藏了好多的音乐,奈何好多音乐受版权限制,需要购买VIP才能听,还有 ...
- 如何在博客主页添加音乐按钮(HTML小试)
以下只是本人第一次接触 HTML 的小尝试: 如下图,我在我的博客主页添加了一个音乐按钮: 具体步骤如下: 点击管理博客,在博客栏目中点添加: 写好标题,将代码复制在内容里面,代码如下: <ht ...
- jekyll个人博客中添加音乐播放插件
方法一: 环境要求 jekyll 七牛 开始使用 step1 首先下载这个文件open-embed.html,右键,另存为Html;下面是源码,也可以复制保存下面的源码; <style> ...
- hexo博客中添加音乐播放器
1. 简介 本篇文章是介绍基于网易云iframe插件在hexo博客中加装音乐播放器的方法,无需安装任何额外插件. 2.安装步骤 在网易云音乐中打开你想要插入的音乐页面,点击 生成外联播放器. 在网页中 ...
- 为博客园添加github跳转链接
一般程序员都会有自己的github仓库,在博客园添加跳转链接,可以很方便的进行访问查看. 添加html 首先,需要在设置中添加一段html,用于跳转链接 <a class="git-l ...
- 【转】在你的博客中添加Google地图(Use Google Map API On Your Bolg)
在你的博客中添加Google地图(Use Google Map API On Your Bolg) *+申请一组 Google Maps API Key 在使用 Google Maps API 之前, ...
- 博客园添加鼠标粒子吸附特效
本文从以下三个方面, 阐述在博客园添加鼠标粒子吸附特效: 一. 效果展示 二. 权限申请 三. 设置步骤 一. 效果展示 在博客园的页面, 出现鼠标粒子吸附的特效, 如图所示: 二. 权限申请 点击博 ...
最新文章
- SpringMVC学习手册(三)------EL和JSTL(上)
- RxJava使用(一)基本使用
- MLPerf发布首个AI芯片推理测试排行榜:阿里平头哥含光800获得多项第一
- python回归模型 变量筛选_如何进行高维变量筛选和特征选择(一)?Lasso回归
- 八:MVC初始化数据库
- 学习——JavaWeb05:JSP入门
- Java开发2018年值得学习的10大技术
- [iOS]深度遍历view的subview
- linux下C语言简单实现线程池
- Matlab中矩阵编号方式以及一维二维三维数据间的相互转换
- Android安全-代码安全4-逆向工具对抗
- 二阶系统响应指标图_二阶系统单位阶跃响应.ppt
- VoLTE业务端到端流程
- 使用pyinstaller将python脚本转成EXE可执行文件遇到的问题和总结
- yum升级mysql_3分钟,YUM升级MYSQL,5.1到5.6
- [三剑客]老男孩教育-三剑客笔试题集合
- 部署学之思在线考试项目
- Linux下定时函数timerfd_xxx()的使用
- SQL2008使用with求余额表,流水账方式
- sqlserver 排序规则(字符集)查看与修改