html audio语音播放器,HTML5-定制音频播放器-audio
先看看效果---》传送门《---,如果感觉没什么大不了的就可以绕道了(==)
HTML结构其实很简单,不要在意那个音频的地址。 首先是audio标签,是我们这个小东西的核心。其主要的属性可以点这里。
做点前期的小工作。把背景弄黑,让播放器居中。
body {
background: black;
}
#maindiv {
width: 300px;
margin: 0px auto;
position: relative;
}
我们会将这个标签进行隐藏,本来我们就是不想用浏览器的默认样式。
#vid {
display : none;
}
接下来,我们开始给我们的播放器上样式。首先是最外面的标签。
.vid-span {
width: 300px;
height: 300px;
border-radius: 100%;
position: relative;
top: 0px;
left: 0px;
background: -moz-radial-gradient(center, ellipse cover, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
box-shadow:0px 0px 15px #7db9e8;}
这里使用一个在线的背景制作工具,各种兼容,神器不解释。想用的可以猛戳这里。
在进行下一步之前,我给大家介绍点知识,就是用字体代替图片。我做的这个播放暂停键其实是就是两个图标,大家可以用浏览器尽量放大看看,你就会发现这个按键非常清晰。这就是字体的好处,放大而不失真,大概就是这个意思吧。而且体积极小。我是使用了一个网站自动生成了自定义的字体,使用的时候去服务器加载。这样的网站其实还是挺多的,我在这放一个链接,我感觉使用的方法还是相当简单的,就不做太多的介绍了。
↑这就是把图标引入的方式。
↓为了不太过于死板,把图标放对位置后,我们再加点过度动画。
.play-button {
font-size: 100px;
position: absolute;
top: 100px;
left: 100px;
}
.play-button span {
transition: color linear 0.2s, box-shadow linear 0.2s;
}
.play-button span:hover {
color: #F7FCFA;
text-shadow:0px 0px 15px #F7FCFA;
}
这样我们就把HTML和CSS写的差不多了。这次就简单的写写播放暂停,音量神马的之后再写。
$(document).ready(function() {
var vid = $("#vid").attr({
// 'autoplay' : 'autoplay',
// 'controls' : 'controls',
'loop' : 'loop',
'preload' : 'auto'
});
var vidDOM = vid[0];
vidDOM.volume = 0.2;
$(".play-button").on({
click : function(){
$(this).children().toggleClass(function(){
if ($(this).hasClass("icon-play")) {
return "icon-pause";
} else {
return "icon-play";
};
});
if (vidDOM.paused) {
vidDOM.play();
} else {
vidDOM.pause();
};
return false;
}
});
});
这里面有个小坑,直接用JQ返回的不是多媒体对象,里面没有相关的方法。解决的方法就是用var vidDOM = vid[0];这种方式获取。将这个变量保存,方便接下来的操作。说实话,代码非常简单,我就不多说了。
有同志可能想立马写一些高级的功能,可以查看这里,或去W3C看看。我也会接着做些高级的功能,有兴趣的同志可以接着来。
html audio语音播放器,HTML5-定制音频播放器-audio相关推荐
- 自定义制作音频播放器_使用HTML5制作音频播放器,第3部分:微数据和皮肤
自定义制作音频播放器 In the first two articles of this series I introduced the concept and code of a customize ...
- HTML5视频播放器video和音频播放器audio属性,事件,案例
HTML 音频/视频 方法 方法 描述 addTextTrack() 向音频/视频添加新的文本轨道. canPlayType() 检测浏览器是否能播放指定的音频/视频类型. load() 重新加载音频 ...
- 音乐封面转动html,带封面的HTML5手机音频播放器
本文演示了三种不同样式的html5音频播放器,通过html5的audio标签,使其支持自定义歌名.歌手和歌词,是否自动播放,音乐封面图,播放进度等 查看演示 下载资源: 104 次 下载资源 下载积分 ...
- vue2.x 音频播放器 使用element ui + Audio实现一款完整的音频播放器
项目背景 audio 音频播放在多媒体开发中非常常见,但是实际项目中你就会发现,每个系统的audio音频界面都长的不一样,百花齐放... pw怎么会同意呢[哈哈],马上掏出手机,你改成长这个样子就好了 ...
- HTML5的音频播放和视频播放
1.音频播放 audio(音频) html5提供了播放音频文件的标准 <audio src="anli.mp3" controls="controls"& ...
- html5在线音乐列表播放器,HTML5列表音乐播放器SMusic
插件描述:一款基于HTML5.Css3的列表式音乐播放器,包含列表,音量,进度,时间,歌词展示以及模式等功能,不依赖任何库 SMusic使用方法 这是一款基于HTML5以及CSS3的列表式音乐播放器, ...
- html怎么设置点击播放音乐,html5点击播放音乐试听按钮动画特效
特效描述:html5 点击播放 音乐试听 按钮动画特效.html5鼠标滑过或点击播放音乐试听特效 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Examples eventType ...
- html5播放加速,html5倍速播放插件
Video Speed Controller 是一款倍速播放视频的浏览器插件! 现在网站上播放的视频,基本上都可以实现倍速播放,但偶尔也有些网站上的视频:没有倍速播放功能. 有时候看一些没有倍速播放功 ...
- linux bluez语音传输,Linux BlueZ PCM 音频播放器
自己写的简单的实验代码,贴上来看看,有兴趣的话,大家可以交流 /******************************************************************** ...
最新文章
- oracle中lock的解释
- postgresql中表的继承及分区表(四)
- 2020-07-16 CVPR2020 VL论文讨论(5) 笔记
- Minimal安装CentOS 7使用yum报This system is not registered to Red Hat Subscription Management.
- linux批量为文件名添加前缀脚本示例
- js函数中参数的传递
- 半圆和圆锥在一起会产生什么神奇的反应?
- JavaWeb前端之AJAX的初步学习
- java 加载class文件路径_动手实现MVC: 1. Java 扫描并加载包路径下class文件
- t-sql中的事务控制及错误处理
- 大三软件工程小项目-小技术集合总结
- 高手也不好当,压力更大
- 单片机音乐盒c语言程序代码,基于单片机的八音盒电路原理图和完整程序源代码.doc...
- 深信服AC1000路由部署模式怎么配置线路负载均衡
- 深度学习机器学习面试题——GAN
- 金山办公财报首秀:订阅业务、云办公激增,广告疲软
- openfoam学习心得--N-S方程无数种写法汇总与转换
- idea中使用git查看每一行代码是谁写的
- 拼多多算法岗第一场笔试 2020.08.02
- 二分法排序_二分法排序算法
热门文章
- mysql中employees的意思_MySQL 示例数据库 employees 详解
- 欢送离职同事聚餐通知
- 微信小程序提示canvas 2d接口支持同层渲染且性能更佳,怎么解决?
- linux中mysql用到my.cnf
- 简述PGA相关概念及参数
- 微信小程序控制硬件第17篇 : 腾讯连连小程序通过LLSync蓝牙协议控制安信可PB-02模组,无需网络实现蓝牙本地通讯。(附带源码)
- 【mysql数据库开放授权】
- 教你一招(将能看到的视频就能下载到本地)
- C++库二进制兼容Binary Compatible教程
- 第十一章 人类复杂疾病与计算系统生物学