原生JS实现网页手机音乐播放器 歌词同步播放的示例

整了一下  之前写了好几次每一次都丢三落四的 今天花了半天理了下思路 整理了下头绪

//获取歌词文本
var txt = document.getElementById("lrc");
var lrc = txt.value;//获取文本域里的值
/*console.log(lrc);*/
var lrcArr = lrc.split("[");//去除[
/*console.log(lrcArr);*/
var html = "";//定义一个空变量保存文本
for(var i=0 ; i<lrcArr.length ; i++)
{
  var arr = lrcArr[i].split("]");
  /*console.log(arr[1]);*/
  var allTime = arr[0].split(".");
  var time = allTime[0].split(":");
  //获取分钟 秒钟 把时间换算成秒钟
  var timer = time[0]*60 + time[1]*1；
  var text = arr[1];
  if(text)
  {
    html += "<p id="+timer+">"+text+"</p>"
  }
  con.innerHTML = html     <pre class="html" name="code">}</pre>
<pre></pre>
<div></div>
<div>实现歌词同步首先要获取到文本框 再配合H5中新增的属性如图 其实很简单啦！</div>
<div></div>
<div><pre class="html" name="code">    //监听音乐播发进度实现歌词同步
myMusic.addEventListener("timeupdate",function(){
  //获取当前播放时间
  var curTime = parseInt(this.currentTime)；
  if(document.getElementById(curTime))
  {
    for(var i=0 ; i<oP.length ; i++)
    {
oP[i].style.cssText = "color:#ccc;font-size:12px;";
    }
    document.getElementById(curTime).style.cssText="color:rgb(242,110,111);font-size:18px;";
    if (oP[num+7].id == curTime)//判断成功一次num++
    {
con.style.top = -20*num +"px";
num++;
    }
  }
});</pre></div>
<pre></pre>

以上这篇原生JS实现网页手机音乐播放器 歌词同步播放的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • 原生JS实现小小的音乐播放器
  • js制作简单的音乐播放器的示例代码
  • JavaScript实现带播放列表的音乐播放器实例分享
赞 (0)

相关推荐

  • 原生JS实现小小的音乐播放器

    前  言 最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的旋转 3.支持点击进度条调整播放的位置,以及调整音量 4.显示音乐的播放时间 5.支持切歌:上一首.下一首.点击歌名切歌:暂停播放等~ 添加音乐有两种方式: ①可以用一个audo标签,这样应该把音乐的地址存放到一个数组中: ②第二种方式是,有几首歌就添加几个audo标签,然后获取所有的背景音乐(示例中我们先添加三首音乐,放到

  • JavaScript实现带播放列表的音乐播放器实例分享

    代码较最基础的播放器实现增加了playlist,使用MakeList实现多首播放,有需要的可以直接使用: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • js制作简单的音乐播放器的示例代码

    一.设计目的: 1.随着现在人民生活质量的提高同样伴随着生活压力的增大,越来越多的人追求越来越多的娱乐,其中一种娱乐方式就是音乐,于是突发奇想,制作一个音乐播放器. 2.主要功能: 1 支持循环自动播放 2 支持图片的旋转 3 支持调整播放的位置,以及调整声音的大小 4 歌词滚动效果 5 每秒显示音乐的播放时间 二 .设计思路: 1.向浏览器中添加背景音乐: 首先应该向网页中添加几首好听的背景音乐.添加音乐有,两种方式可以用一个audo标签,这样应该把音乐的地址存放到一个数组中,第二种方式是,有

  • 原生JS实现网页手机音乐播放器 歌词同步播放的示例

    整了一下  之前写了好几次每一次都丢三落四的 今天花了半天理了下思路 整理了下头绪 //获取歌词文本 var txt = document.getElementById("lrc"); var lrc = txt.value;//获取文本域里的值 /*console.log(lrc);*/ var lrcArr = lrc.split("[");//去除[ /*console.log(lrcArr);*/ var html = "";//定义一个

  • Android实现音乐播放器歌词显示效果

    这两天有个任务,说是要写一个QQ音乐播放器歌词的那种效果,毕竟刚学自定义View,没有什么思路,然后就Google.写了一个歌词效果,效果图在后面,下面是我整理的代码. 首先实现这种效果有两种方式 1.自定义View里重载onDraw方法,自己绘制歌词 2.用ScrollView实现 第一种方式比较精确,但要支持滑动之后跳转播放的话难度很大,所以我选择第二种,自定义ScrollView 我也不多说,直接上代码,代码中有注释 一.自定义LycicView extends ScrollView 里面

  • php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)

    在web开发中经常会碰到一些简单的视频播放功能,但现在的视频格式不同,并且可以动态增加,所以我们就必须把视频保存到数据哦,好了下面我们来看我写的段简单的 php视频网页播放器代码吧. 复制代码 代码如下: <?PHP include './admin/connect.php'; @extract($db->get_one("select * from movieinfo where id='".$_GET['id']."'")); $db->que

  • Android编程之播放器MediaPlayer实现均衡器效果示例

    本文实例讲述了Android播放器MediaPlayer实现均衡器效果.分享给大家供大家参考,具体如下: 这几天在系统学习Android官方API Demos,看到实现均衡器效果,就把官方API中代码copy下来,根据网上前辈的指引略有修改,添加了注释. public class AudioFxDemo extends Activity { private static final String TAG = "AudioFxDemo"; private static final flo

  • TFDN图片播放器 不错自动播放

    复制代码 代码如下: <html> <head> <title>52515.net上传程序</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css">     <!--     body,td,th {     font-size

  • 原生JS实现Ajax通过GET方式与PHP进行交互操作示例

    原生JS实现Ajax通过GET方式与PHP进行交互操作示例

    本文实例讲述了原生JS实现Ajax通过GET方式与PHP进行交互操作.分享给大家供大家参考,具体如下: 一.代码 conn.php <?php $conn=mysql_connect("localhost","root","root") or die("数据库连接失败".mysql_error()); mysql_select_db("db_database27",$conn) or die(&quo

  • Android实现歌曲播放时歌词同步显示具体思路

    我们需要读取以上歌词文件的每一行转换成成一个个歌词实体: 复制代码 代码如下: public class LyricObject { public int begintime; // 开始时间 public int endtime; // 结束时间 public int timeline; // 单句歌词用时 public String lrc; // 单句歌词 } 可根据当前播放器的播放进度与每句歌词的开始时间,得到当前屏幕中央高亮显示的那句歌词.在UI线程中另起线程,通过回调函数 onDra

  • 原生JS操作网页给p元素添加onclick事件及表格隔行变色

    原生JS操作网页给p元素添加onclick事件及表格隔行变色

    1. 给网页中的所有p元素添加onclick事件: 复制代码 代码如下: <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>Insert title here</title> <!-- <script src="jQuery/jquery-1.10.2.

  • 原生js实现网页顶部自动下拉/收缩广告效果

    知识要点 1.实现原理: 通过递归改变div的高度值达到缓慢下拉的效果. 2.一共分为3个步骤我写了三个函数 第一个show()函数(下拉):初始值高度h<300的话 h+5  反之return退出停止,调用setTimeout方法30毫秒执行一次+5 第二个hide()函数(收回):只是高度的判断不同高度h-5 反之return退出停止,调用setTimeout方法30毫秒执行一次-5 第三个dd()函数(再次弹出):这里要注意的是第二次弹出的div是一个新的div把它的高度设置为0,实现原理

  • 不使用qvod播放器获取qvod播放路径的方法

    复制代码 代码如下: static string GetHtml(string url)        {            HttpWebRequest request = WebRequest.Create(url) as HttpWebRequest;            request.Timeout = 16 * 1000;            HttpWebResponse response = request.GetResponse() as HttpWebResponse

随机推荐