最近在做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 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部分代码。

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

本文标题: android实现歌词自动滚动效果

本文地址: http://www.cppcns.com/ruanjian/android/244226.html

android开发歌词滑动效果_android实现歌词自动滚动效果相关推荐

  1. android开发游记:仿支付宝余额数字累加滚动效果的实现

    支付宝更新9.0后,细心的朋友会发现新增了一个动画效果,就是进入我的钱包的时候,我的余额会有一段滚动显示的动画效果,比如说你有100块,余额就从0滚动到100,看到自己的钱在不断涨,让我们这些穷屌丝莫 ...

  2. android仿微信图片上传进度,Android开发之模仿微信打开网页的进度条效果(高仿)...

    一,为什么说是真正的高仿? 阐述这个问题前,先说下之前网上的,各位可以复制这段字,去百度一下  "仿微信打开网页的进度条效果",你会看到有很多类似的文章,不过他们有个共同点,就是实 ...

  3. android仿微信 进度条,Android开发之模仿微信打开网页的进度条效果(高仿)

    一,为什么说是真正的高仿? 阐述这个问题前,先说下之前网上的,各位可以复制这段字,去百度一下  "仿微信打开网页的进度条效果" ,你会看到有很多类似的文章,不过他们有个共同点,就是 ...

  4. unity实现图片轮播效果_unity 背景无限循环滚动效果

    背景无限循环滚动效果如下示: 步骤如下: 导入背景图片后,设置图片的格式,如下图: 2.图片格式也可以设置是Texture格式,但是Wrap Mode 一定要是Repeat[重复发生]:然后记得App ...

  5. html自动滚动效果,HTML标签marquee实现滚动效果的简单方法(必看)

    页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - 可以实现多种滚动效果,无需js控制. 使用marquee标记不仅可以移动文字,也可以移动图片,表格等. 语 ...

  6. html marquee滚动效果,HTML标签marquee实现滚动效果(示例代码)

    页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - 可以实现多种滚动效果,无需js控制. 使用marquee标记不仅可以移动文字,也可以移动图片,表格等. 语 ...

  7. android开发歌词滑动效果_android 实现歌词自动滚动+手指顺畅拖动

    需求: 1.歌词可以跟随播放进度进行自动滑动: 2.可以手指进行歌词顺畅滑动: 3.当前歌词高亮,且置于屏幕的中心: 实现方式一: 也是网上可以搜到的做多的方式:自定义view,继承textview; ...

  8. android开发沉浸式标题栏_android实现沉浸式状态栏

    前言 在android开发的过程中,经常会涉及到沉浸式状态栏的问题,说白了,就是手机屏幕顶部栏的颜色显示问题,为了实现美感一体的效果,许多app都已经开始了沉浸式状态栏的显示,这里,我也简单介绍一个沉 ...

  9. android触摸效果,Android开发进阶:仿MIUI12控件触摸反馈效果(下沉+倾斜)附源码...

    简单模仿了下MIUI12里控件的触摸反馈效果,转载请标明出处 效果简述 按压控件内圈区域,控件整体缩小,高度降低(阴影消失) 按压内圈 按压控件外圈区域,依据触摸点控件以中心为支点,向触摸点倾斜 按压 ...

最新文章

  1. 面试题6:用两个栈实现队列
  2. 【操作系统】进程的描述与控制(这知识它不进脑子啊~!)
  3. 掘金健康大数据 需突破多重挑战
  4. [No0000111]java9环境变量配置bat
  5. 读再多书都没觉得自己变强?试试我这“5年陈”的方法
  6. 【转】WCF Data Service 使用小结 (一)—— 了解OData协议
  7. python调用菜单响应事件_[Python] wxpython 编程触发菜单或按钮事件
  8. php遍历文本文档txt文件中的链接内容为数组
  9. $.ajax 简单记录
  10. 微信小程序实战篇:小程序之页面数据传递
  11. 吴恩达深度学习C4W1(Pytorch)实现
  12. 从零开始搭建自己的个人博客网站
  13. pytorch Cosine Annealing LR
  14. Springboot2.6+thymeleaf实现png和jpg图片格式转换
  15. Icon图标 [Java]
  16. 在Azure上建立Ubantu虚拟机
  17. Rockchip开发系列 - 总目录
  18. twitter_如何找回旧的Twitter网站
  19. 支付宝SDK下载地址
  20. 写个数仓吧(15)品牌复购率——ADS层

热门文章

  1. 6名员工集体跳楼讨薪 有说有笑情绪轻松(组图)
  2. Game boy模拟器(7):精灵
  3. 通过希网获取公网ip
  4. 是否停止运行此脚本?此页面上的脚本造成Internet Explore运行速度减慢
  5. discuzz论坛搭建
  6. 如何快速搭建App系统-工具广告变现篇
  7. BUGKU CFT初学之WEB
  8. 用计算机打印出1000,一台HP1000型激光打印机用5米USB延长线接到另一台做主机的电脑上频繁出现打印故障!...
  9. 计算机二级2020还考vb么,我大一,想问一下计算机二级考VB有用吗,听说VB快被取消拉,是不是考VB没考其他的价值大啊!...
  10. 银川水利学校计算机专业怎么样,黄河水利职业技术学院的计算机专业怎么样