android实现歌词自动滚动效果

最近在做Android 的MP3播放的项目,要实现歌词的自动滚动,以及同步显示。

lyric的歌词解析主要用yoyoplayer里面的,显示部分参考了这里 ,这里只是模拟MP3歌词的滚动。

先上一下效果图:

滚动实现的代码其实也简单。显示画出当前时间点的歌词,然后再分别画出改歌词后面和前面的歌词,前面的部分往上推移,后面的部分往下推移,这样就保持了当前时间歌词在中间。

代码如下 LyricView,相关信息在注释了标明了。

package ru.org.piaozhiye.lyric;
import java.io.File;
import java.util.List;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.widget.TextView;
/**
 * @author root
 *
 */
public class LyricView extends TextView {
 private Paint mPaint;
 private float mX;
 private static Lyric mLyric;
 private Paint mPathPaint;
 public String test = "test";
 public int index = 0;
 private List<Sentence> list;
 public float mTouchHistoryY;
 private int mY;
 private long currentDunringTime; // 当前行歌词持续的时间,用该时间来sleep
 private float middleY;// y轴中间
 private static final int DY = 50; // 每一行的间隔
 public LyricView(Context context) {
 super(context);
 init();
 }
 public LyricView(Context context, AttributeSet attr) {
 super(context, attr);
 init();
 }
 public LyricView(Context context, AttributeSet attr, int i) {
 super(context, attr, i);
 init();
 }
 private void init() {
 setFocusable(true);
 PlayListItem pli = new PlayListItem("Because Of You",
  "/sdcard/MP3/Because Of You.mp3", 0L, true);
 mLyric = new Lyric(new File("/sdcard/MP3/Because Of You.lrc"), pli);
 list = mLyric.list;
 // 非高亮部分
 mPaint = new Paint();
 mPaint.setAntiAlias(true);
 mPaint.setTextSize(22);
 mPaint.setColor(Color.WHITE);
 mPaint.setTypeface(Typeface.SERIF);
 // 高亮部分 当前歌词
 mPathPaint = new Paint();
 mPathPaint.setAntiAlias(true);
 mPathPaint.setColor(Color.RED);
 mPathPaint.setTextSize(22);
 mPathPaint.setTypeface(Typeface.SANS_SERIF);
 }
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 canvas.drawColor(0xEFeffff);
 Paint p = mPaint;
 Paint p2 = mPathPaint;
 p.setTextAlign(Paint.Align.CENTER);
 if (index == -1)
  return;
 p2.setTextAlign(Paint.Align.CENTER);
 // 先画当前行,之后再画他的前面和后面,这样就保持当前行在中间的位置
 canvas.drawText(list.get(index).getContent(), mX, middleY, p2);
 float tempY = middleY;
 // 画出本句之前的句子
 for (int i = index - 1; i >= 0; i--) {
  // Sentence sen = list.get(i);
  // 向上推移
  tempY = tempY - DY;
  if (tempY < 0) {
  break;
  }
  canvas.drawText(list.get(i).getContent(), mX, tempY, p);
  // canvas.translate(0, DY);
 }
 tempY = middleY;
 // 画出本句之后的句子
 for (int i = index + 1; i < list.size(); i++) {
  // 往下推移
  tempY = tempY + DY;
  if (tempY > mY) {
  break;
  }
  canvas.drawText(list.get(i).getContent(), mX, tempY, p);
  // canvas.translate(0, DY);
 }
 }
 protected void onSizeChanged(int w, int h, int ow, int oh) {
 super.onSizeChanged(w, h, ow, oh);
 mX = w * 0.5f; // remember the center of the screen
 mY = h;
 middleY = h * 0.5f;
 }
 //
 /**
 * @param time
 *  当前歌词的时间轴
 *
 * @return currentDunringTime 歌词只需的时间
 */
 public long updateIndex(long time) {
 // 歌词序号
 index = mLyric.getNowSentenceIndex(time);
 if (index == -1)
  return -1;
 Sentence sen = list.get(index);
 // 返回歌词持续的时间,在这段时间内sleep
 return currentDunringTime = sen.getDuring();
 }
} 

剩下的就是使用他了。就是取出歌词的index,和该行歌词持续的时间进行sleep。

package ru.org.piaozhiye;
import java.io.IOException;
import ru.org.piaozhiye.lyric.LyricView;
import android.app.Activity;
import android.media.MediaPlayer;
import android.os.Bundle;
import android.os.Handler;
public class LyricDemo extends Activity {
 private MediaPlayer mp;
 private LyricView lyricView;
 private String path = "/sdcard/MP3/Because Of You.mp3";
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 lyricView = (LyricView) findViewById(R.id.audio_lrc);
 mp = new MediaPlayer();
 mp.reset();
 try {
  mp.setDataSource(path);
  mp.prepare();
 } catch (IllegalArgumentException e) {
  // TODO Auto-generated catch block
  e.printStackTrace();
 } catch (IllegalStateException e) {
  // TODO Auto-generated catch block
  e.printStackTrace();
 } catch (IOException e) {
  // TODO Auto-generated catch block
  e.printStackTrace();
 }
 mp.start();
 new Thread(new UIUpdateThread()).start();
 }
 class UIUpdateThread implements Runnable {
 long time = 100; // 开始 的时间,不能为零,否则前面几句歌词没有显示出来
 public void run() {
  while (mp.isPlaying()) {
  long sleeptime = lyricView.updateIndex(time);
  time += sleeptime;
  mHandler.post(mUpdateResults);
  if (sleeptime == -1)
   return;
  try {
   Thread.sleep(sleeptime);
  } catch (InterruptedException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
  }
 }
 }
 Handler mHandler = new Handler();
 Runnable mUpdateResults = new Runnable() {
 public void run() {
  lyricView.invalidate(); // 更新视图
 }
 };
} 

整个project的源码。包括yoyoplayer的解析lyric部分代码。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android 基于RecyclerView实现的歌词滚动自定义控件

    本文介绍了Android 基于RecyclerView实现的歌词滚动自定义控件,分享给大家,具体如下: 先来几张效果图: 这几天打算做一个控件,来让自己复习一下自定义 view 的知识以及事件分发机制的原理与应用.对于这个控件,我已经封装好了,只要调用就可以了. 本来是想放上 gitHub 和 添加依赖的.但是提交 github 出了问题一直不会弄,所以就只能先等等了.((:′⌒`)) 接下来说一下实现原理: 该控件分为以下几个部分: 歌词自动滚动 歌词颜色字体变化 触碰屏幕歌词不滚动,高亮显示

  • 比较完整的android MP3 LRC歌词滚动高亮显示(附源码)

    1.以前的滚动只是安行来刷新,现在不是按行来滚动了,其实就是在一定时间内整体往上移动,比如说在1S内刷新10次,由于认得肉眼看起来像是滚动. 关键代码如下: 复制代码 代码如下: float plus = currentDunringTime == 0 ? 30                : 30                        + (((float) currentTime - (float) sentenctTime) / (float) currentDunringTim

  • Android实现歌词滚动效果

    本文实例为大家分享了Android实现歌词滚动效果的具体代码,供大家参考,具体内容如下 自定义TextView public class VerticalScrollTextView extends TextView { private Paint mPaint; private float mX; private Paint mPathPaint; public int index = 0; private List<Sentence> list; public float mTouchHi

  • android实现歌词自动滚动效果

    最近在做Android 的MP3播放的项目,要实现歌词的自动滚动,以及同步显示. lyric的歌词解析主要用yoyoplayer里面的,显示部分参考了这里 ,这里只是模拟MP3歌词的滚动. 先上一下效果图: 滚动实现的代码其实也简单.显示画出当前时间点的歌词,然后再分别画出改歌词后面和前面的歌词,前面的部分往上推移,后面的部分往下推移,这样就保持了当前时间歌词在中间. 代码如下 LyricView,相关信息在注释了标明了. package ru.org.piaozhiye.lyric; impo

  • js实现Select列表内容自动滚动效果代码

    本文实例讲述了js实现Select列表内容自动滚动效果.分享给大家供大家参考.具体如下: 这里演示的Select列表内容自动滚动效果,文字可自动滚屏,当网页加载完毕后,Select中的内容会一个接一个向上滚动,当然,滚动的参数和速度是可以调节的.或许你会用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-font-scroll-codes/ 具体代码如下: <html> <head> <title&g

  • Android TextView实现垂直滚动效果的方法

    本文实例讲述了Android TextView实现垂直滚动效果的方法.分享给大家供大家参考,具体如下: 在TextView中,如果文本很长,可能需要实现垂直滚动显示文本的效果.这里需要在XML布局文件中为TextView设置如下几个属性. Android:scrollbars="vertical" android:scrollbarStyle="X" 其中X为outsideOverlay或insideOverlay. android:scrollbarFadeDur

  • JS实现的新闻列表自动滚动效果示例

    本文实例讲述了JS实现的新闻列表自动滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #box{width:260px;height:100px;margi

  • Android 进度条自动前进效果的实现代码

    今天给大家分享进度条自动前进功能的实现,先给大家分享实现效果图,感觉不错可以参考实现代码. 效果如下图: 首先布局要设置进度条最大值: <ProgressBar android:id="@+id/pro1" style="@android:style/Widget.ProgressBar.Horizontal" android:layout_width="400dp" android:layout_centerHorizontal=&quo

  • Android 使用ViewPager自动滚动循环轮播效果

    对Android 利用ViewPager实现图片可以左右循环滑动效果,感兴趣的朋友可以直接点击查看内容详情. 主要介绍如何实现ViewPager自动播放,循环滚动的效果及使用.顺便解决ViewPager嵌套(ViewPager inside ViewPager)影响触摸滑动及ViewPager滑动速度设置问题. 先给大家展示下效果图,喜欢的朋友可以下载源码: 1.实现 没有通过ScheduledExecutorService或Timer定期执行某个任务实现,而是简单的通过handler发送消息去

  • DevExpress GridView自动滚动效果

    引言 最新有一个winform项目使用的是DevExpress的控件,所以最近都在摸索使用这套控件,实在是佩服整套控件的强大,同时代码写起来也简洁.客户有一个需求,希望报表结果能在外接的大屏幕上定时滚动.这个报表我们使用的控件就是GridControl,查询结果一屏不能显示完全,增加一个定时器,指定时间让GridView自动滚动显示下一屏的信息. 同事的实现 但是看到同事实现的代码时,却觉得有点不舒服.他大概的代码如下: /// <summary> /// 当前的行索引 /// </su

  • Android实现文字上下滚动效果

    关于Android实现文字上下滚动这个功能,我目前有两种方法实现: 一个是在TextView 中加上翻转的动画效果,然后设置循环滚动:一种是改写ViewPager 的滚动方向,使它从下到上进行滚动,并设置循环滚动: 首先介绍第一种方法: 实现思路:自定义TextView,在TextView中加上从下到上滚动的动画效果,然后设置循环播放: 创建一个AutoTextVieW使之继承TextView,然后在onDraw方法中调用getHeight()方法获取textview当前的高度. 在接下来的动画

  • Android自定义ViewFlipper实现滚动效果

    本文实例为大家分享了自定义view实现了类似百度手机助手,首页评论滚动效果. 看效果: gif做的不好,其效果就是:几个viewitem不停的向上滚动,新加入item有个淡入的效果. 说下实现思路:自定义view继承至LinearLayout,控制item数量及其动画效果,实现item复用,传入数据即可,使用方便. 代码: /** * Jiantao.Yang * * @description 仿百度手机助手,评论滚动效果 * @time 2015/1/16 17:37 */ public cl

  • Android使用ScrollView实现滚动效果

    本文实例为大家分享了ScrollView实现滚动效果的具体代码,供大家参考,具体内容如下 如果长文本的内容超过一屏幕 则只能显示一屏幕的内容 设置ScrollView 通过滚动浏览下面的内容 若将标签更改为<HorizontalScrollView></HorizontalScrollView>则为水平滚动效果 xml文件: <?xml version="1.0" encoding="utf-8"?> <android.su

随机推荐