音乐播放小窗口html,jQuery+html5迷你网页音乐播放器代码
一款外观十分简洁的jQuery+html5迷你网页音乐播放器代码,很实用的mp3音乐播放器插件,有比较基本的播放、暂停、上一首下一首歌曲切换等功能。
查看演示
下载资源:
20
次 下载资源
下载积分:
20
积分
js代码
$(document).ready(function () {
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', $('.active-song').attr('data-src'));
var tl = new TimelineMax();
tl.to('.player__albumImg', 3, {
rotation: '360deg',
repeat: -1,
ease: Power0.easeNone
}, '-=0.2');
tl.pause();
$('.player__play').click(function () {
if ($('.player').hasClass('play')) {
$('.player').removeClass('play');
audioElement.pause();
TweenMax.to('.player__albumImg', 0.2, {
scale: 1,
ease: Power0.easeNone
})
tl.pause();
} else {
$('.player').addClass('play');
audioElement.play();
TweenMax.to('.player__albumImg', 0.2, {
scale: 1.1,
ease: Power0.easeNone
})
tl.resume();
}
});
var playhead = document.getElementById("playhead");
audioElement.addEventListener("timeupdate", function () {
var duration = this.duration;
var currentTime = this.currentTime;
var percentage = (currentTime / duration) * 100;
playhead.style.width = percentage * 4 + 'px';
});
function updateInfo() {
$('.player__author').text($('.active-song').attr('data-author'));
$('.player__song').text($('.active-song').attr('data-song'));
}
updateInfo();
$('.player__next').click(function () {
if ($('.player .player__albumImg.active-song').is(':last-child')) {
$('.player__albumImg.active-song').removeClass('active-song');
$('.player .player__albumImg:first-child').addClass('active-song');
audioElement.addEventListener("timeupdate", function () {
var duration = this.duration;
var currentTime = this.currentTime;
var percentage = (currentTime / duration) * 100;
playhead.style.width = percentage * 4 + 'px';
});
} else {
$('.player__albumImg.active-song').removeClass('active-song').next().addClass('active-song');
audioElement.addEventListener("timeupdate", function () {
var duration = this.duration;
var currentTime = this.currentTime;
var percentage = (currentTime / duration) * 100;
playhead.style.width = percentage + '%';
});
}
updateInfo();
audioElement.setAttribute('src', $('.active-song').attr('data-src'));
audioElement.play();
});
$('.player__prev').click(function () {
if ($('.player .player__albumImg.active-song').is(':first-child')) {
$('.player__albumImg.active-song').removeClass('active-song');
$('.player .player__albumImg:last-child').addClass('active-song');
audioElement.addEventListener("timeupdate", function () {
var duration = this.duration;
var currentTime = this.currentTime;
var percentage = (currentTime / duration) * 100;
playhead.style.width = percentage * 4 + 'px';
});
} else {
$('.player__albumImg.active-song').removeClass('active-song').prev().addClass('active-song');
audioElement.addEventListener("timeupdate", function () {
var duration = this.duration;
var currentTime = this.currentTime;
var percentage = (currentTime / duration) * 100;
playhead.style.width = percentage + 'px';
});
}
updateInfo();
audioElement.setAttribute('src', $('.active-song').attr('data-src'));
audioElement.play();
});
});
音乐播放小窗口html,jQuery+html5迷你网页音乐播放器代码相关推荐
- 竖直菜单 html,jQuery实现的网页竖向菜单效果代码
本文实例讲述了jQuery实现的网页竖向菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现竖向的网页菜单代码,可折叠展开的二级网页菜单,修改一下可用在后台管理中,显示在左侧的 ...
- 使用HTML5实现网页音乐播放器
转自http://www.php.cn/html5-tutorial-402849.html 本篇文章主要介绍了HTML5网页音乐播放器的示例代码,内容挺不错的,现在分享给大家,也给大家做个参考. 本 ...
- 视屏播放_使用原生MediaPlayer+TextureView实现全屏、小窗口、视频列表、m3u8监控播放
Android 视屏播放器----MediaPlayer+TextureView实现全屏.小窗口.视频列表播放 标签(空格分隔): 视屏播放器 一.效果图 二.集成步骤 按文件目录复制进自己项目[文件 ...
- java仿qq空间音乐播放_使用JS改造的简单网页音乐播放器,仿QQ空间样式
最近有好多东西要发表分享给大家,但由于时间问题,越多反而显得越乱,都不知道从何下手,该做的事情还有很多,最近整博客,又整得有点不兼容了,在想抽个时间修复它,可能时间要比较长,因为无从下手,必须一个一个 ...
- html5是播放什么中新,关于html5中标签video播放的新解析-
这篇文章主要介绍了关于html5中标签video播放的新解析,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 前端同学要使用 HTML5 播放器视频,必然会使用 video 标签,不过大 ...
- html全景直播播放器,HTML5:网页如何播放VR视频?
VR视频和普通视频有什么区别? VR即虚拟现实,VR视频又名全景视频,是指使用全景摄像机拍摄的,观看时可以自由变换视角的视频. 戴上VR眼镜,随着头部转动看到的图像也随之变化,仿佛身处一个虚拟的世界中 ...
- html网页播放flac,教你如何无损录制网页上播放的声音
要对网页上的声音进行无损录制其实很简单,不管是网页上所播放视频上的声音,还是网页上的动画里发出的声音,或者是网页的背景音乐,都是可以进行无损录制的. 1,首先打开浏览器,并在百度上搜索下载支持无损内录 ...
- 图片预览小窗口html,jQuery和css3超酷图片预览插件
这是一款使用css3和Velocity.js制作的jquery图片预览插件. 电子商务网站设计的宗旨是通过简化的设计提高用户体验,提高转化率也有一定的模式.另外一种模式是在需要的地方提供更多的信息来达 ...
- html 图片自动滚动播放,小卖弄:纯CSS实现图片滚动播放效果
一.效果抢先 如果您手头上的浏览器是FireFox6+,或者教新版本的Chrome或是Safari浏览器,就可以看到类似上面截图的效果.完全CSS挑大梁,JS请假回家相亲去了. 二.原理简述 显然,要 ...
- (附源码)音乐播放小程序 毕业设计 031306
音乐播放小程序 摘 要 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,音乐播放小程序被用户普遍使用 ...
最新文章
- 在 Java 中高效使用锁的技巧--转载
- java各科成绩排序_java 成绩排序
- antd picker 使用 如何_如何基于jsoneditor二次封装一个可实时预览的json编辑器组件?(react版)...
- lintcode-135-数字组合
- cad缺失字体补全工具_CAD图纸字体不全怎么办?只要修改字体映射表就可以轻松解决了...
- 庆祝我的第一本书出版
- vsftpd 安装及简单配置
- linux xunsou_Xunsearch安装和使用
- ACM/ICPC 2018亚洲区预选赛北京赛站网络赛 A、Saving Tang Monk II 【状态搜索】
- 使用Word制作签名电子版
- 安卓第三方接入登陆-新浪登陆
- ubuntu16.04录制4K屏软件使用备注
- springmvc案例
- Java枚举是什么?关于Java枚举的一些理解
- 家用计算机硬件升级方案,旧电脑如何升级提速,老电脑升级方案!
- 全网最火爆,最详细Docker与自动化测试讲解,看完觉得我又行了
- 如何批量的将jpg文件转换为png格式
- UE4 教程蓝图的使用
- gcastdtserv.exe
- vue flv播放器报错Cannot read property ‘addEventListener‘ of null