在项目中须要做一个播放器,还要实现歌词同步的效果,就跟如今搜狗音乐的歌词同步差点儿相同,在网上查了一些关于这方面的。整理了一下,在这里,其有用这种方法能够吗?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript">
window.setInterval("dd()",200);
var i=0;
function dd(){
i=i+10;
//alert(i)
document.getElementById("mydiv2").style.width=i+"px";
}
function x(){
//alert("-----")
document.getElementById("mydiv2").style.color="red";
}
</script> </head> <body>
<div class="mydiv1" style="position: absolute; z-index: 1;">
<h1>影月莹莹哈哈哈哈哈哈</h1>
</div>
<div class="mydiv2" id="mydiv2" style="position: absolute; z-index:2; color: blue; width: 100px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
<h1>影月莹莹哈哈哈哈哈哈</h1>
</div>
<button id="mybutton" onclick="x()" style="height: 100px; width: 200px; margin-top: 100px;">电机 </button>
</body> </html>

在这里。。我用了一个这样的方法。不知行不行的通 。。至于歌词同步,就调时间吧。向网上一些博客,,看了都是须要AJAX解析歌曲文件,获取歌词,歌词时间。实现歌词同步,在这里。假设仅仅是一两首歌曲,自己调一调时间也行吧。。。。。至于大家有什么看法。。额额。。。嘿嘿

我的项目7 js 实现歌词同步(额,小小的效果)的更多相关文章

  1. 基于jplayer实现歌词同步的JS音乐播放器效果

    分享一款基于jplayer实现歌词同步的JS音乐播放器效果.这是一款基于jQuery实现的音乐播放器功能代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <textare ...

  2. 论HTML5 Audio 标签歌词同步的实现

    HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...

  3. Jplayer歌词同步显示插件

    http://blog.csdn.net/wk313753744/article/details/38758317 1.该插件是一个jquery的编写的跟jplayer实现歌词同步的插件,最终效果如图 ...

  4. HTML5实践之歌词同步播放器

    歌曲播放我们会发现他的兼容性不是很好,譬如IE上能播放的flash播放器,再firfox或者chrome上就不是很好的应用了,因为有插件的阻碍!HTML5的出现让这一切成为了可能,但是播放器虽然播放了 ...

  5. Android VLC播放器二次开发3——音乐播放(歌曲列表+歌词同步滚动)

    今天讲一下对VLC播放器音频播放功能进行二次开发,讲解如何改造音乐播放相关功能.最近一直在忙着优化视频解码部分代码,因为我的视频播放器需要在一台主频比较低的机器上跑(800M主频),所以视频解码能力受 ...

  6. HTML5实现歌词同步

    开篇 HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就能够实现视频播放.相似地,在HTML5中也有相应的处理音频文件的标签,那就是audio标签 在线Demo audio ...

  7. 用HTML5的Audio标签做一个歌词同步的效果

    HTML5出来这么久了,但是关于它里面的audio标签也就用过那么一次,当然还仅仅只是把这个标签插入到了页面中.这次呢就刚好趁着帮朋友做几个页面,拿这个audio标签来练练手. 首先你需要向页面中插入 ...

  8. TextView实现歌词同步

    利用TextView实现歌词同步显示,这是一个简单的利用TextView实现滚动实时显示歌词的. 里面的内容都已经写上了详细的注释.里面播放音乐的时候歌词同步展示. 做媒体这块的朋友可以学习一下,练练 ...

  9. 关于js中的同步和异步

    最近看到前端面试问到js中的同步和异步,这个问题该怎么回答? 梳理一下,js对于异步的处理,很多人的第一反应是ajax,这只能说是对了一半. 1.个人觉得,js中,最基础的异步是setTimeout和 ...

随机推荐

  1. 2015 UESTC 搜索专题B题 邱老师降临小行星 记忆化搜索

    邱老师降临小行星 Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/contest/show/61 Des ...

  2. hihocoder1489 Legendary Items (微软2017年预科生计划在线编程笔试)

    http://hihocoder.com/problemset/problem/1489 笔试题第一道,虽然说第一道都很水,但是我感觉这题不算特别水把..这道题我就卡住了我记得,tle,最后只有30分 ...

  3. SQl CASE 语句的嵌套使用方式

    case具有两种格式.简单case函数和case搜索函数.  1.简单case函数 case sex when ’1’ then ’男’ when ’2’ then ’女’else ’其他’ end ...

  4. 二叉树遍历-JAVA实现

    二叉树遍历分为前序.中序.后序递归和非递归遍历.还有层序遍历. //二叉树节点 public class BinaryTreeNode { private int data; private Bina ...

  5. libgdx与Robovm绑定的坑

    https://github.com/BlueRiverInteractive/robovm-ios-bindings

  6. redis cluster 设置密码做集群时gem下client.rb文件修改

    redis节点有设置密码,然后在创建集群的时候没有设置密码的命令 ./redis-trib.rb create --replicas 1 127.0.0.1:6381 127.0.0.1:6382 1 ...

  7. OAuth:OAuth概述

    OAuth addresses these issues by introducing an authorization layer and separating the role of the cl ...

  8. 漏洞预警 | ECShop全系列版本远程代码执行高危漏洞

    2018年9月1日,阿里云态势感知发布预警,近日利用ECShop全系列版本的远程代码执行漏洞进行批量化攻击量呈上升趋势.该漏洞利用简单且危害较大,黑客可通过WEB攻击直接获得服务器权限. 漏洞原理 该 ...

  9. Power Desginer系列00【转载】

    绪论 Sybase PowerDesigner(简称PD)是最强大的数据库建模工具,市场占有率第一,功能也确实十分强大,现在最新版本是15.1,已经支持最新的SQL Server 2008等数据库,另 ...

  10. windows安装Jupyter Notebook

    这是我自定义的Python 的安装目录 (D:\SoftWare\Python\Python36\Scripts) 1.Jupyter Notebook 和 pip 为了更加方便地写 Python 代 ...