原生js制作播放器
以前 就想做一个播放器,一直没狠下心来,今天终于狠下心来,把这个做出来了(因为有点无聊)
做这个播放器 也百度了一下, 你叫我做,我肯定做不出来, 就算用jquery 我也做不出来. 以前也用过audio控件,但是只不过绑定src 再来个loop
这个播放器就做完了
今天,来一个比较好看的
效果图
<div class="photo">
<div class="title">种种<span style="font-size:10px;">_陈粒</span></div> <div class="play" title="暂停"></div>
<div class="lrc">
<div class="words"></div>
</div>
<audio src=" http://sc1.111ttt.cn/2015/5/10/11/103111444123.mp3" loop="loop" id="myMusic"></audio>
<!--音频标签-->
</div>
做音乐播放器
使用audio
我做了一个 播放 暂停 图片旋转,还有个歌词,其他都没弄了
说一下这里的重难点
这里图片旋转是用css3的animation 做的
.play.rotate {
-webkit-animation: rot 5s linear infinite;
-moz-animation: rot 5s linear infinite;
-ms-animation: rot 5s linear infinite;
-o-animation: rot 5s linear infinite;
animation: rot 5s linear infinite; /*css3自定义动画*/
} @keyframes rot {
from {
transform: rotate(0deg);
} to {
transform: rotate(360deg);
}
找一个lrc歌词
放入到文本域
<textarea id="txt" style="display: none;">
[00:00.79]种种 - 陈粒
[00:01.49]词:张小蜀 曲:陈粒 [00:06.93]你是我梦里
[00:08.53]陌生 熟悉
[00:10.98]与众不同
[00:13.81]你是我梦里
[00:15.34]幻想 现实
[00:17.88]不灭星空
[00:20.57]眼睛
[00:21.59]彩色是你
[00:24.15]黑白是你
[00:28.08]低落 欢欣
[00:31.36]有始不见终
[00:35.08]你是我梦里
[00:36.90]失去 得到
[00:39.26]欲望失宠
[00:42.16]你是我梦里
[00:44.07]迟疑 果断
[00:46.35]思想牢笼
[00:48.88]耳朵
[00:49.73]沉默是你
[00:52.59]呼啸是你
[00:56.62]分裂退化
[00:59.64]脚底悬空
[01:03.51]你是我梦里
[01:05.46]孤寂 热闹
[01:07.74]来去匆匆
[01:10.41]你是我梦里
[01:12.20]虚妄 真实
[01:14.76]午夜霓虹
[01:17.34]胃里
[01:18.19]苍凉是你
[01:21.13]炙热是你
[01:25.45]填满 掏空
[01:27.85]会不会不同
[01:32.24]你是我三十九度的风
[01:35.35]风一样的梦
[01:39.40]汇集 失散
[01:41.94]感受在消融
[01:46.55]梦里你是梦
[01:49.57]越梦越空
[01:54.10]越空
[01:55.60]越爱做
[01:57.98]关于你的梦
[02:02.02]
</textarea>
歌词Lrc
通过点击图片 使歌曲播放 而歌曲是在audio 控件中 所有要来个点击事件 简介的使audio播放
var btn = document.getElementsByClassName("play")[0];//通过class类名去获取元素 数组的形式储存 [] 点击 播放 再点击 暂停
var myMusic = document.getElementById("myMusic");//通过ID 获取audio
var mark = true;//布尔值 true真 false假
btn.onclick = function () {
if (mark)//隐式转换 i > 1
{
this.className += " rotate";
myMusic.play();//播放音乐
myMusic.volume = 0.4; //音量
mark = false;
} else {
this.className = "play";
myMusic.pause();//音乐暂停
mark = true;
}
};
现在 基本上 已经可以播放了
那么我们把歌词 放到 div 为class 的words 当中
所以 要获取 文本域
var txt = document.getElementById("txt");
使用 console 输出
但是我们不是要这种格式的 ,我们只需要时间 所以 要 分割
var lrc = txt.value.split("[");
循环输出 在分割一下
for (var i = 0; i < lrc.length; i++) {
var lrcArrly = lrc[i].split("]"); console.log(lrc[i]) //分割时分,秒 // console.log(ms);
//console.log(lrcArrly[1]); 歌词 i
} };
就是这样
接下来需要放在 words下面
var html = "";
html += "<p id=" + ms + ">" + lrcArrly[1] + "</P>";
words.innerHTML = html;
前面我们看见 时间格式是这样的
而audio 的 addEventListener 方法 输出的时间是这个
我们要转 时间格式
分割
var time = lrcArrly[0].split("."); //分割时分,秒
var times = time[0].split(":");
// console.log(times[0]) //分割时,分
var ms = times[0] * 60 + times[1] * 1; //分钟转换为秒 × 60 times[1] 是秒数,×1 表示 string转换为int类型
输出一下
正确了但是addEventListener 方法的时间 格式太精确了
我们也要转一下
var currentTimes = parseInt(this.currentTime); //取整
输出对比
现在时间 就转好了
myMusic.addEventListener("timeupdate", function () {
// timeupdate 是时间变换
// 输出时间变换:console.log(this.currentTime); 1.300000
console.log(this.currentTime);
var currentTimes = parseInt(this.currentTime); //取整
console.log(currentTimes); });
时间 转换 好了 歌词 也放好了
我们 想要鼠标移入歌词,出现时间
html += "<p id=" + ms + " title=[" + lrc[i] + ">" + lrcArrly[1] + "</P>"; // 给他个id 是想偷懒 自动生成 不用 设置其他的了
想要他 唱的时候 歌词 移动
鼠标监听的 事件中添加
这里和图片轮盘的实现方法差不多,一个大的div 包裹一个div 大的div 隐藏溢出的 div 的内容
div 向上移动
//aidio监听播放进度 发生变化,就触发函数
myMusic.addEventListener("timeupdate", function () {
// 输出时间变换:console.log(this.currentTime); 1.300000
console.log(this.currentTime);
var currentTimes = parseInt(this.currentTime); //取整
console.log(currentTimes);
if (document.getElementById(currentTimes)) { // 当前的 该颜色,非当前就改为以前颜色
for (var i = 0; i < Ps.length; i++) {
Ps[i].style.color = "gray";
Ps[i].style.fontSize = "10px";
}
document.getElementById(currentTimes).style.color = "red";
document.getElementById(currentTimes).style.fontSize = "18px"; if (Ps[num].id == currentTimes) {
words.style.top = -15* num + "px"; if (num>=58) {
num = 0;
}
num++;
}
}
});
这个就是使用原生js做的播放器
可以看这里的视频 :http://www.iqiyi.com/w_19ru5adg61.html
下面是源码
<textarea id="txt" style="display: none;">
[00:00.79]种种 - 陈粒
[00:01.49]词:张小蜀 曲:陈粒 [00:06.93]你是我梦里
[00:08.53]陌生 熟悉
[00:10.98]与众不同
[00:13.81]你是我梦里
[00:15.34]幻想 现实
[00:17.88]不灭星空
[00:20.57]眼睛
[00:21.59]彩色是你
[00:24.15]黑白是你
[00:28.08]低落 欢欣
[00:31.36]有始不见终
[00:35.08]你是我梦里
[00:36.90]失去 得到
[00:39.26]欲望失宠
[00:42.16]你是我梦里
[00:44.07]迟疑 果断
[00:46.35]思想牢笼
[00:48.88]耳朵
[00:49.73]沉默是你
[00:52.59]呼啸是你
[00:56.62]分裂退化
[00:59.64]脚底悬空
[01:03.51]你是我梦里
[01:05.46]孤寂 热闹
[01:07.74]来去匆匆
[01:10.41]你是我梦里
[01:12.20]虚妄 真实
[01:14.76]午夜霓虹
[01:17.34]胃里
[01:18.19]苍凉是你
[01:21.13]炙热是你
[01:25.45]填满 掏空
[01:27.85]会不会不同
[01:32.24]你是我三十九度的风
[01:35.35]风一样的梦
[01:39.40]汇集 失散
[01:41.94]感受在消融
[01:46.55]梦里你是梦
[01:49.57]越梦越空
[01:54.10]越空
[01:55.60]越爱做
[01:57.98]关于你的梦
[02:02.02]
</textarea> <div class="photo">
<div class="title">种种<span style="font-size:10px;">_陈粒</span></div> <div class="play" title="暂停"></div>
<div class="lrc">
<div class="words"></div>
</div>
<audio src=" http://sc1.111ttt.cn/2015/5/10/11/103111444123.mp3" loop="loop" id="myMusic"></audio>
<!--音频标签-->
</div>
html部分
</body>
<script type="text/javascript"> var num = 0;
var btn = document.getElementsByClassName("play")[0];//通过class类名去获取元素 数组的形式储存 [] 点击 播放 再点击 暂停
var myMusic = document.getElementById("myMusic");//通过ID 获取audio
var words = document.getElementsByClassName("words")[0];
var mark = true;//布尔值 true真 false假 btn.onclick = function () {
if (mark)//隐式转换 i > 1
{
this.className += " rotate";
myMusic.play();//播放音乐
myMusic.volume = 0.4;
mark = false;
} else {
this.className = "play";
myMusic.pause();//音乐暂停
mark = true;
}
};
var txt = document.getElementById("txt");
var lrc = txt.value.split("[");
// console.log(txt.value); var html = "";
//循环遍历 出歌词
for (var i = 0; i < lrc.length; i++) {
var lrcArrly = lrc[i].split("]");
var time = lrcArrly[0].split(".");
// console.log(lrc[i]) //分割时分,秒 var times = time[0].split(":");
// console.log(times[0]) //分割时,分 var ms = times[0] * 60 + times[1] * 1; //分钟转换为秒 × 60 times[1] 是秒数,×1 表示 string转换为int类型 // console.log(ms);
// console.log(lrcArrly[1]); // 歌词 if (lrcArrly[1]) { //判断是否存在 存在进入
html += "<p id=" + ms + " title=[" + lrc[i] + ">" + lrcArrly[1] + "</P>"; }
words.innerHTML = html;
// console.log(words.innerHTML);
};
//获取所有的p标签
var Ps = document.getElementsByTagName("p");
//aidio监听播放进度 发生变化,就触发函数
myMusic.addEventListener("timeupdate", function () {
// 输出时间变换:console.log(this.currentTime); 1.300000
console.log(this.currentTime);
var currentTimes = parseInt(this.currentTime); //取整
console.log(currentTimes);
if (document.getElementById(currentTimes)) { // 当前的 该颜色,非当前就改为以前颜色
for (var i = 0; i < Ps.length; i++) {
Ps[i].style.color = "gray";
Ps[i].style.fontSize = "10px";
}
document.getElementById(currentTimes).style.color = "red";
document.getElementById(currentTimes).style.fontSize = "18px"; if (Ps[num].id == currentTimes) {
words.style.top = -15* num + "px"; if (num>=58) {
num = 0;
}
num++;
}
}
}); </script>
<style type="text/css">
* {
margin:;
padding:;
} body {
background: rgb(55, 76,86);
} .photo {
width: 240px;
height: 240px;
margin: 100px auto;
font-family: "微软雅黑";
padding: 5px;
border-radius: 20px;
box-shadow: 0 0 7px#fff;
overflow: hidden;
} .title {
width: 240px;
height: 30px;
/*background:url("images/2.png")no-repeat;*/
font-size: 20px;
color: #ccc;
font-weight: bold;
text-align: center;
line-height: 30px;
} .play {
width: 80px;
height: 80px;
background: url("http://p1.music.126.net/lN2jt4Vkqw3zzIjc2JjyCw==/2532175280981641.jpg?param=130y130")no-repeat;
margin: auto;
border-radius: 50% 50%;
cursor: pointer;
} .lrc {
width: 200px;
height: 100px;
margin: 20px auto;
text-align: center;
font-size: 10px;
overflow: hidden;
color: #ccc;
} .words {
position: relative;
left: 0px;
} .play.rotate {
-webkit-animation: rot 5s linear infinite;
-moz-animation: rot 5s linear infinite;
-ms-animation: rot 5s linear infinite;
-o-animation: rot 5s linear infinite;
animation: rot 5s linear infinite; /*css3自定义动画*/
} @keyframes rot {
from {
transform: rotate(0deg);
} to {
transform: rotate(360deg);
}
}
</style>
这就是 使用原生js 做一个简单的播放器
原生js制作播放器的更多相关文章
- 使用 原生js 制作插件 (javaScript音乐播放器)
1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- js插件---10个免费开源的JS音乐播放器插件
js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...
- Asp.Net MVC中Aplayer.js音乐播放器的使用
1.前言: Aplater.js是一款可爱.漂亮的Js音乐播放器,以前就了解过也弄过一些,现在就用mp3的格式来在.Net里面开发.管网 https://aplayer.js.org/ 2.入手: 在 ...
- 利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
- 基于jplayer实现歌词同步的JS音乐播放器效果
分享一款基于jplayer实现歌词同步的JS音乐播放器效果.这是一款基于jQuery实现的音乐播放器功能代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <textare ...
- 10个免费开源的JS音乐播放器插件
点这里 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些 网页播放器 插件比较少见,所以这里为大家整理一个集合,也许会有用到的时候. 下面整理的播放器有些是支持自适应的, ...
- Wavesurfer.js音频播放器插件的使用教程
Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件,本文主要记录它及其视觉效果插件Regions插件的使用方法. 1.创建实例 引入插件 import W ...
- EasyPlayer.js H5播放器帮助我这种不会前端的普通用户也能轻松实现直播接入
说到EasyPlayer.js,先得说一下EasyPlayer到底是啥, An elegant, simple, fast android RTSP/RTMP/HLS/HTTP Player.Easy ...
- js 音乐播放器
在写之前先说下我遇到得两个问题,第一个问题是,在音乐标签,我希望得是切换数据做到得,但是出了问题,暂时为解决,第二个问题,页面切换时音乐继续播放由卡顿情况,未处理好. 好了,那我们开始做这个音乐播放器 ...
随机推荐
- xhprof代码添加分析性能
<?php xhprof_enable( XHPROF_FLAGS_MEMORY, [ 'ignored_functions' => [ //'call_user_func', //'ca ...
- prometheus部署安装
1. 下载&部署 # 下载 [root@prometheus src]# cd /usr/local/src/ [root@prometheus src]# wget https://gith ...
- admin源码分析
django settings 源码分析 导入settingso模块,进入源码,会发现settings是一个 单例 LazySettings类实例化产生的一个对象,LazySettings实例化后就会 ...
- (长期更新)【机器学习实践】Pycharm编辑器的使用注意事项
1. 写Python代码,根据PEP8风格,默认一行的长度不超过 80 个字符. 但是pycharm 默认是第 120 个字符处,故进行修改: File→Settings→Editor→Code S ...
- 转发表(MAC表)、ARP表、路由表总结
原文:https://cloud.tencent.com/developer/article/1173761 转发表(MAC表).ARP表.路由表总结 我是东东东 发表于我是东东强订阅 1.5K ...
- 教程2:如何找到内存泄漏dotmemory
在本教程中,我们将看到如何使用dotmemory定位和固定在你的应用程序的内存泄漏.但在开始之前,让我们在一个内存泄漏是一致的. 内存泄漏是什么? 根据维基百科,内存泄漏是由于不正确的内存管理时,”一 ...
- 后端 SpringBoot + 前端 vue 打包发布到Tomcat
近段时间 做了一些前后端的开发 需要在Tomcat里进行发布 把自己整理的分享出来 后端打包 pom.xml 文件 <packaging>war</packaging> ...
- C语言控制台软件制作
本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个“*”,要求按下列格式打印 ***** *** * *** ***** 所谓“沙漏形状”,是指每行输出奇数个符号:各行符号中心对齐:相邻两 ...
- [Cometoj#4 B]奇偶性_打表
奇偶性 题目链接:https://cometoj.com/contest/39/problem/B?problem_id=1577 数据范围:略. 题解: 因为$f$的构造原因,很容易找到规律. 进而 ...
- MySQL添加、修改、撤销用户数据库操作权限的一些记录
查看MYSQL数据库中所有用户 SELECT DISTINCT CONCAT('User: ''',user,'''@''',host,''';') AS query FROM mysql.user; ...