实现音乐播放器的代码(html5+css3+jquery)


Posted in Javascript onAugust 04, 2015

看下面的效果图很不错吧,是怎么实现的呢?下面小编给大家分享下我的一番宝物,Lisa唱的 在angel beats的插曲。用到html5、css、jquery实现此音乐播放器。

一番宝物,Lisa唱的   在angel beats的插曲

实现音乐播放器的代码(html5+css3+jquery)

最后在简述这个东西怎么写之前,本人男,24岁,籍贯上海,诚招女友一枚,要求:性格温顺。。。(省略500字)

<div class="Music">
 <div class="MusicPlaySound"> 
 <img class="MusicPlayBg" src="image/music/zsy.png" /> 
 <img class="MusicPlayProcess rotate" src="image/music/yyjd.png" />
 <div class="MusicPlayBox">
  <h3 class="title">一番の宝物</h3>
  <p class="name">Lisa(Yui final ver)</p>
  <div class="MusicPic"> <img class="MusicPicName PicNameRotate" src="image/music/yifan.jpg" /> <img class="MusicPicButton" src="image/music/pause.png" /> </div>
  <div class="Share icon">分享</div>
  <div class="Next icon">切歌</div>
 </div>
 </div>
 <audio src="music/Yuiki.mp3" autoplay=""></audio>
</div>

html部分就这样略过了。。。。基本都会写。。。

.MusicPlayProcess.rotate{animation:rotate 30s infinite linear;}
.MusicPlayProcess.pause{animation-play-state:paused;
-webkit-animation-play-state:paused;}
.MusicPicName.PicNameRotate{animation:rotate 4s infinite linear;}
.MusicPicName.pause{animation-play-state:paused;
-webkit-animation-play-state:paused;}
@keyframes rotate{
 from{ transform:rotate(0deg)}
 to{ transform:rotate(360deg)}
}

css部分么主要挑点有趣的

大概么这么几个css3动画。。。。上面那个

.MusicPlayProcess.rotate
{ animation: rotate 30s infinite linear;}

你可以把这个30s改成歌曲时间长度就变成进度条了  O~HOHOHOHO(懒人总有懒办法)

infinite 么无限播放么你也懂得

.MusicPicName.pause{animation-play-state:paused;

-webkit-animation-play-state:paused;}

然后么暂停动画、、、、

兼容性是个硬伤其他没什么

$(function(){
 var play=1;
 $(".MusicPicButton").click(function(){
 if(play==0){
  $(this).attr("src","image/music/pause.png")
  $(".MusicPlayProcess").removeClass("pause")
  $(".MusicPicName").removeClass("pause") 
  $("audio").get(0).play();
  play=1;
 }else{
  $(this).attr("src","image/music/play.png")
  $(".MusicPlayProcess").addClass("pause")
  $(".MusicPicName").addClass("pause") 
  play=0;
  $("audio").get(0).pause();
 }
 })
})

这里是Jq部分

play么确定当前状态1播放0暂停

 $("audio").get(0).play();

$("audio").get(0).pause();

以上就是本文的全部内容,希望大家喜欢。

Javascript 相关文章推荐
关于 文本框默认值 的操作js代码
Jan 12 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 #Javascript
函数window.open实现关闭所有的子窗口
Aug 03 #Javascript
百度地图api如何使用
Aug 03 #Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 #Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 #Javascript
javascript常见数据验证插件大全
Aug 03 #Javascript
javascript自定义in_array()函数实现方法
Aug 03 #Javascript
You might like
PHP的宝库目录--PEAR
2006/10/09 PHP
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
php 字符串替换的方法
2012/01/10 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
IE bug table元素的innerHTML
2010/01/11 Javascript
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
python循环监控远程端口的方法
2015/03/14 Python
Python语言描述最大连续子序列和
2017/12/05 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
C#笔试题和英文面试题
2013/02/07 面试题
国际残疾人日广播稿范文
2014/10/09 职场文书
公司股东出资证明书
2014/11/01 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
春晚观后感
2015/06/11 职场文书
聘任合同书
2015/09/21 职场文书
学校团代会开幕词
2016/03/04 职场文书
文书工作总结(范文)
2019/07/11 职场文书