我的项目7 js 实现歌词同步(额,小小的效果)

在项目中需要做一个播放器,还要实现歌词同步的效果,就跟现在搜狗音乐的歌词同步差不多,在网上查了一些关于这方面的,整理了一下,在这里,其实用这个方法可以吗?

<!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解析歌曲文件,获取歌词,歌词时间,实现歌词同步,在这里,如果只是一两首歌曲,自己调一调时间也行吧。。。。,至于大家有什么看法。。额额。。。嘿嘿

时间: 2024-10-27 13:05:19

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

HTML5音频播放,歌词同步,及视频播放功能(JPlayer、JWPlayer、VideoJS)

近期项目中用到音频视频播放.所以就写了一个demo: 这个是JPlayer插件的视频播放: 这个是音频播放,歌词同步: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <!--注意:在IIS上配置的时候,需加入mime映射,否则歌词出不来.在IIS列表中找到"MIME类型".进行加入.lrc类型;.mp4类型文件--> <head>     <

HTML5实现歌词同步

开篇 HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就能够实现视频播放.相似地,在HTML5中也有相应的处理音频文件的标签,那就是audio标签 在线Demo audio标签 实现一个audio标签非常easy,相应的html代码例如以下: <audio id="player" src="music/我在人民广场吃炸鸡.mp3" autoplay controls> </audio> 上述代码不须要一行js脚本就

Jplayer歌词同步显示插件

http://blog.csdn.net/wk313753744/article/details/38758317 1.该插件是一个jquery的编写的跟jplayer实现歌词同步的插件,最终效果如图: 2.首先引入jplayer的相关的js库和样式文件. [html] view plaincopy <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link

项目中js的工具类

js工具类的功能有: 1.去掉字符串前后空格 2.清空select 3.验证手机号 4.字符串转换int型数字 5.获取checkbox的选中的值 6.去掉左边的空白 7.去掉邮编的空白 源码如下: /** * 去掉字符串前后空格 * * @param str * @returns */ function trim(str){ return str.replace(/^(\s|\xA0)+|(\s|\xA0)+$/g, ''); } /** * 清空select * * @param selec

安卓音乐播放器中歌词同步问题

音乐文件是.lrc格式的,以一首歌曲为例, [ti:回忆的沙漏][ar:邓紫棋][al:G.E.M.][by:][offset:0][00:02.50]回忆的沙漏 - G.E.M. 邓紫棋[00:04.62]词:庭竹[00:05.72]曲:G.E.M.[00:15.03]拼图一片片失落[00:18.56]像枫叶的冷漠[00:21.87]墙上的钟[00:23.79]默默数着寂寞[00:29.30]咖啡飘散过香味[00:33.06]剩苦涩陪着我[00:36.68]想念的心[00:39.44]埋葬我在

linux 下 python 调用 mplayer 解析歌词同步播放显示

加载同目录同名歌词同步显示 #!/usr/bin/python # -*- coding: utf-8 -*- import sys, os, time, subprocess, re, chardet def load_lrc(lrc_file):     try:         lrc_contains = open(lrc_file, 'rb').read()         encoding = chardet.detect(lrc_contains)['encoding']     

Java SSH 项目总结——JS实现图片悬浮

前言 先说下要实现什么功能,页面上有图片,当鼠标移动到图片上时,图片呈放大悬浮的效果.试验了几种方法,比如用鼠标事件控制div中图片的显示和隐藏,还有其它方法,最后采用了开源的JS来实现图片的悬浮效果. 效果 先看下效果图,当鼠标移动到图片上时,图片就会放大悬浮到页面中间,鼠标移走时,图片就会从悬浮的页面中间消失,页面上原有的样式也不会有任何改变. 实现 看完效果图,我们来看下实现过程: <span style="font-family:KaiTi_GB2312;">//引

如何在github上fork一个项目来贡献代码以及同步原作者的修改

如何在github上fork一个项目来贡献代码以及同步原作者的修改 作为一个IT人,通过github进行学习是最快的成长手段.我们可以浏览别人的优秀代码.但只看不动手还是成长得很慢,因此为别人贡献代码才是明智之举.比如我们看下片看,许多大片都是由字幕组免费翻译压制的.为什么他们要这样做呢?因为他们都是聪明的大学生,为了提高听力水平,提高笔译水平才这样干的!中国人都是非常实务的!因此贡献代码,参与开源项目都是有益无害的!好了,让我们开始吧! 如何贡献自己的力量 首先你总得有自己的github帐号吧

Web项目去掉Js文件红叉

项目用到jquery,但将Jquery拷进去后,js文件有个红叉,看上去非常不爽.如下图: 解决方法: 1.找到项目下的.project文件 2.去掉Javascript验证 1 <?xml version="1.0" encoding="UTF-8"?> 2 <projectDescription> 3 <name>Struts2_Jquery_Json</name> 4 <comment></co