html圆圈里面有歌词,html5+js带滚动歌词的音乐播放器(同时支持列表,json) | 小灰灰博客...
var lrc_content=$("#lrc_content").val();
//data
var lyric=[{
'name':"告白气球-周杰伦",
'img':'img/photo1.jpg',
'audio_src':'music/gaobaiqiqiu.mp3',
'content':lrc_content
}]
window.οnlοad=function()
{
var play_btn=document.getElementById("play_btn");
var prev_btn=document.getElementById("prev_btn");
var next_btn=document.getElementById("next_btn");
var audio=document.getElementsByTagName("audio")[0];
var initTime=document.getElementsByTagName("time")[0];
var time=document.getElementsByTagName("time")[1];
var progress_bar=document.getElementById("progress_bar");
var progress_cube=document.getElementById("progress_cube");
var vol_bar=document.getElementById("vol_bar");
var vol_cube=document.getElementById("vol_cube");
var lyric_con=document.getElementById("lyric_con");
var lyric_txt=document.getElementById("lyric_txt");
var icon1=document.getElementById("icon1");
var icon2=document.getElementById("icon2");
var lyric_tit=document.getElementById("lyric_tit");
var list_con=document.getElementById("list_con");
var list_item=list_con.getElementsByTagName("p");
var songIndex=0;
var container=document.getElementById("container");
var obj;
function config()
{
this.play_mark=true;
this.duration=audio.duration;
this.play_btn="";
this.vol=audio.volume;
this.timer=null;
this.rotateSum=0;
this.icon1=icon1.innerHTML;
this.icon2=icon2.innerHTML;
this.icon1_co=icon1.style.color;
this.endplay_btn="";
this.endicon1=icon1.innerHTML;
this.endicon2="";
}
obj= new config();
//列表控制
var allSong="";
for(var song=0;song
{
allSong+="
"+lyric[song].name+"
"
}
list_con.innerHTML=allSong;
list_con.style.height=lyric.length*30+"px";
for(var listIndex=0;listIndex
{
list_item[listIndex].index=listIndex;
list_item[listIndex].οnclick=function(ev)
{
var ev=ev||window.event;
ev.stopPropagation();
songIndex=this.index;
change_music();
}
}
list_con.style.display="none";
list.οnclick=function()
{
if(list_con.style.display=="none")
{
list_con.style.display="block";
}
else{
list_con.style.display="none";
}
}
//下一首
next_btn.οnclick=function(){
songIndex++;
change_music();
}
prev_btn.οnclick=function(){
songIndex--;
change_music();
}
function change_music()
{
clearInterval(obj.timer);
if(songIndex>=lyric.length)
{songIndex=0}
else if(songIndex<0)
{songIndex=lyric.length}
obj= new config();
iconinit();
audioInit();
playedTime();
lyric_ctrl();
}
//初始化总时长、音量等
function audioInit()
{
time.innerHTML=format(audio.duration);
audio.volume=0.5;
play_btn.innerHTML=obj.play_btn;
vol_cube.style.left=audio.volume*vol_bar.offsetWidth+"px";
lyric_tit.innerText=lyric[songIndex].name;
if(lyric[songIndex].img==''){
$("#photo_pic img").attr("src","img/img_no.jpg");
}else{
$("#photo_pic img").attr("src",lyric[songIndex].img);
}
audio.src=lyric[songIndex].audio_src;
progress_cube.style.left=0;
}
audioInit();
//播放时间
audio.addEventListener("timeupdate",function()
{
playedTime();
})
function playedTime(){
if(audio.currentTime==audio.duration)
{
next_btn.onclick();
play_btn.onclick();
}
var n=audio.currentTime/audio.duration;
progress_cube.style.left=n*progress_bar.offsetWidth+"px";
initTime.innerHTML=format(audio.currentTime);
var id_num=parseInt(audio.currentTime);
var lyric_p=document.getElementsByTagName("p");
for(var i=0;i
{
lyric_p[i].index=i;
}
if(document.getElementById("lyric"+id_num))
{
var obj=document.getElementById("lyric"+id_num);
for(var i=0;i
{
lyric_p[i].className="played";
}
for(var j=obj.index;j
{
lyric_p[j].className="";
}
obj.className="yellow active";
lyric_txt.style.top=lyric_con.offsetHeight/2-obj.offsetTop+"px";
}
}
function format(time)
{
var time=parseInt(time);
var m=parseInt(time/60);
var s=parseInt(time%60);
m=zero(m);
s=zero(s);
function zero(num)
{
if(num<10)
{
num="0"+num;
}
return num;
}
return m+":"+s;
}
//拖拽进度条
progress_cube.οnmοusedοwn=function(ev)
{
var ev=ev||window.event;
var initX=ev.clientX-this.offsetLeft;
this.οnmοusemοve=function(ev)
{
var ev=ev||window.event;
var x=ev.clientX-initX;
if(x<0){x=0}
if(x>progress_bar.offsetWidth-14){x=progress_bar.offsetWidth-14}
play_ctrl(x);
}
document.οnmοuseup=function()
{
document.οnmοusemοve=null;
progress_cube.οnmοusemοve=null;
}
}
function play_ctrl(x){
var timego=x/progress_bar.offsetWidth*audio.duration;
progress_cube.style.left=x+"px";
audio.currentTime=timego;
playedTime();
}
//点击进度条位置
progress_bar.οnclick=function(ev)
{
var ev=ev||window.event;
var dis=ev.clientX-(container.offsetLeft+progress_bar.offsetLeft)-7;
progress_cube.style.left=dis+"px";
play_ctrl(dis);
}/**/
//拖动音量键
vol_cube.οnmοusedοwn=function(ev)
{
var ev=ev||window.event;
var initX=ev.clientX-vol_cube.offsetLeft;
this.οnmοusemοve=function(ev)
{
var ev=ev||window.event;
var x=ev.clientX-initX;
if(x<0){x=0}
if(x>vol_bar.offsetWidth-11){x=vol_bar.offsetWidth-11}
var volresult=x/vol_bar.offsetWidth;
this.style.left=x+"px";
audio.volume=volresult;
}
document.οnmοuseup=function()
{
document.οnmοusemοve=null;
vol_cube.οnmοusemοve=null;
}
}
//点击播放
play_btn.οnclick=function()
{
clearInterval(obj.timer);
if(obj.play_mark)
{
this.innerHTML=obj.endplay_btn;
audio.play();
obj.timer=setInterval(function()
{obj.rotateSum=obj.rotateSum+1;
photo_pic.style.transform="rotate("+obj.rotateSum+"deg)";
},30)
}
else{
this.innerHTML=obj.play_btn;
audio.pause();
}
obj.play_mark=!obj.play_mark;
}
//歌词处理
function lyric_ctrl()
{
var lyricObj=lyric[songIndex].content;
var temp=lyricObj.split("[");
var html="";
for(var i=0;i
{
var arr=temp[i].split("]");
var text=(arr[1]);
var time=arr[0].split(",");
var temp2=time[0].split(".");
var ms=temp2[1];//毫秒
var temp3=temp2[0].split(":");
var s=temp3[1];//秒
var m=temp3[0];//分
var s_sum=parseInt(m*60)+parseInt(s);
if(text)
{
html+="
"+text+"
";
}
}
lyric_txt.innerHTML=html;
}
lyric_ctrl();
function iconinit(){
icon1.className="icon";
icon1.innerHTML=obj.icon1;
icon1.style.color="#fff";
icon2.className="icon";
icon2.style.color="#fff";
}
//喜欢 收藏
icon2.οnclick=function()
{
if(this.innerHTML==obj.icon2)
{
this.innerHTML=obj.endicon2;
this.style.color="yellow";
this.className="icon yellow";
}
else{
this.innerHTML=obj.icon2;
this.style.color="#fff";
this.className="icon";
}
}
icon1.οnclick=function()
{
if(this.style.color==obj.icon1_co)
{
this.innerHTML=obj.endicon1;
this.style.color="#f7759f";
this.className="icon pink";
}
else{
this.innerHTML=obj.icon1;
this.style.color=obj.icon1_co;
this.className="icon";
}
}
}
html圆圈里面有歌词,html5+js带滚动歌词的音乐播放器(同时支持列表,json) | 小灰灰博客...相关推荐
- android开发歌词滑动效果_Android应用开发--MP3音乐播放器滚动歌词实现
[android]代码库2013年6月2日 简.美音乐播放器开发记录 -----主题 这篇博客的主题是:"滚动歌词的实现" 要的效果如下: ----实现过程 1. 建立歌词内容实体 ...
- HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌)
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
- html乐谱播放器,html5 canvas音谱可视化mp3音乐播放器代码
特效描述:html5 canvas 音谱可视化 mp3音乐 播放器代码.html5 canvas通过AudioContext对获取audio标签播放的音域和音高,调用js绘制相应高度的矩形或线条. 代 ...
- HTML5期末大作业:在线音乐播放器网站设计——html5全屏的音乐列表播放器页面源码 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设
HTML5期末大作业:在线音乐播放器网站设计--html5全屏的音乐列表播放器页面源码 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设 ...
- 炫 音乐可视化 html5 在线,HTML5打造的炫酷本地音乐播放器-喵喵Player
将之前捣腾的音乐频谱效果加上一个播放列表就成了现在的喵喵播放器(Meow meow Player,额知道这名字很二很装萌~),全HTML5打造的网页程序,可本地运行也可以挂服务器上用. 在线Demo及 ...
- HTML5之audio实战,网页音乐播放器开发
今天我们就基于 HTML5 audio 来,开发一个网页音乐播放器. 在HTML5 新特性中,audio .video 是我们比较关心的 新 元素,我们终于可以脱离 Flash ,来开发音频.视频播 ...
- 电脑端音乐播放器html5,分享|5 个很酷的音乐播放器
你喜欢音乐吗?那么 Fedora 中可能有你正在寻找的东西.本文介绍在 Fedora 上运行的各种音乐播放器.无论你有庞大的音乐库,还是小一些的,抑或根本没有,你都可以用到音乐播放器.这里有四个图形程 ...
- 全网首个tk网络音乐播放器!支持歌词滚动!你看我吊不?
这是一个用 Python 的 tkinter 库做的一个网络音乐播放器.我不说它的 UI 设计的有多好看,但是它的功能绝对是全站首个!坚持看到底,你不点赞算我输! 成果展示 程序截图 前期准备 程序结 ...
- java仿qq空间音乐播放_使用JS改造的简单网页音乐播放器,仿QQ空间样式
最近有好多东西要发表分享给大家,但由于时间问题,越多反而显得越乱,都不知道从何下手,该做的事情还有很多,最近整博客,又整得有点不兼容了,在想抽个时间修复它,可能时间要比较长,因为无从下手,必须一个一个 ...
- html音乐播放器自动切歌,html5和css3以及jquery实现音乐播放器
这篇文章主要讲实现音乐播放器的代码(html5+css3+jquery),需要的朋友可以参考下 看下面的效果图很不错吧,是怎么实现的呢?下面小编给大家分享下我的一番宝物,Lisa唱的 在angel b ...
最新文章
- golang 字符串 去除最后一个字符
- FSRNet:端到端深度可训练人脸超分辨网络
- WatchOS系统开发大全(5)-WKInterfaceController的生命周期
- leetcode 90. 子集 II(回溯算法)
- python logging模块的作用及应用场景_Python logging模块原理解析及应用
- 【Docker】Segmentation Fault or Critical Error encountered. Dumping core and abort
- Angularjs编写KindEditor,UEidtor指令
- Redis 配置文件杂项。
- scala 单例对象 伴生对象
- c语言for循环延时函数作用,C语言循环语句实现单片机延时函数.pdf
- 别让生活 耗尽了你的耐心和向往 你还有诗和远方...
- vue中使用loadsh实现防抖功能及处理各种数据
- 假设检验2_t分布的应用
- Java+spring 基于ssm的美食网站设计与实现#毕业设计
- 2022最新Java后端面试题(带答案),重点都给画出来了!你不看?
- c++的几个刷题网站(不只有c++)
- Java List<Long>转List<String>
- 第24条:消除非受检警告
- 大数据专业适合考研吗? 1
- VALSE 文档图像智能报告整理
热门文章
- Android 模拟器安装及使用教程
- vue仿微博评论回复_vue教程2-07 微博评论功能
- 使用ExtendSim进行医疗仿真
- archlinux配置Xfce+fcitx5中文输入法
- 【2021】【论文笔记】太赫兹量子阱光电探测器——
- 实现不同电脑共享一套鼠标键盘------ShareMouse
- 利用Java开源库把汉字转拼音(推荐OK)_爱题巴.爱技术.小川哥_百度空间
- bom mysql表,如何输出bomCAD表格
- 怎么完全卸载赛门铁克_赛门铁克专用卸载工具
- roseha 11 用VM虚拟机创建集群测试