效果图

效果图

没有需求背景，纯碎是清明在家无聊

主要的几个功能

• 歌词解析
• 播放/暂停（跟随播放器）
• seek操作
• 以中间为锚点的滚动

lrc文件格式分析

[ti:现代爱情故事]
[ar:张智霖 许秋怡]
[al:现代爱情故事]
[by:esor]
[00:00.00]现代爱情故事
[00:08.00]张智霖　许秋怡
[00:16.00]专辑：现代爱情故事
[01:49.19][00:24.00]
[01:56.86][00:24.91]女：别离没有对错　要走也解释不多

有几个特点

• 只显示有时间的内容，[ti:现代爱情故事]等不会显示
• 同一句歌词，可能有多次显示的时机

所以我们根据正则去对内容进行匹配提取内容，把每一句歌词封装成LrcLineEntity，[01:56.86][00:24.91]女：别离没有对错　要走也解释不多最后会变成两个LrcLineEntity，最后一个歌词文件就可以转换为一个List<LrcLineEntity>。为了保证代码清晰，我们最后转换成一个LrcEntity而不是一个List

public class LrcLineEntity {
    public String content;
    public long startPosition;
}

public class LrcEntity {
    public List<LrcLineEntity> lrcLines;
    public long totalLength;
}

歌词解析

单行歌词解析

public class LrcLineEntity {

    // 提取时间正则
    private static final Pattern TIME_PATTERN = Pattern.compile("\\[(\\d{2}:\\d{2}\\.\\d{2})\\]");
    // 提取内容正则
    private static final Pattern CONTENT_PATTERN = Pattern.compile("\\[.*](.*)");

    // 该句歌词内容
    public String content;
    // 该句歌词开始播放的时间
    public long startPosition;

    public LrcLineEntity(String content, long startPosition) {
        this.content = content;
        this.startPosition = startPosition;
    }

    /**
     * 解析单行歌词
     *
     * @param lrcLine exam:[01:56.86][00:24.91]女：别离没有对错　要走也解释不多
     * @return
     */
    @NonNull
    public static List<LrcLineEntity> parseLine(@NonNull String lrcLine) {
        List<LrcLineEntity> result = new ArrayList<>();

        // 对内容进行提取
        Matcher contentMatcher = CONTENT_PATTERN.matcher(lrcLine);
        String content = "";
        if (contentMatcher.find()) {
            content = contentMatcher.group(1);
        }

        // 对多段时间进行提取
        Matcher timeMatcher = TIME_PATTERN.matcher(lrcLine);
        while (timeMatcher.find()) {
            String timeText = timeMatcher.group(1);
            result.add(new LrcLineEntity(content, parseTimeText(timeText)));
        }

        return result;
    }

    /**
     * 解析时间内容，转换为毫秒（相对时间）
     *
     * @param timeText exam:01:56.86-》(1*100*60*60+56*100*60+86)*10
     * @return
     */
    private static long parseTimeText(@NonNull String timeText) {
        String[] numbers = timeText.split("[^\\d]");
        long hour = 0;
        long minutes = 0;
        long seconds = 0;
        long ms = 0;

        try {
            // 从后往前解析，某些值不存在会出现越界错误，最后得到0不影响计算
            ms = Long.parseLong(numbers[numbers.length - 1]);
            seconds = Long.parseLong(numbers[numbers.length - 2]);
            minutes = Long.parseLong(numbers[numbers.length - 3]);
            hour = Long.parseLong(numbers[numbers.length - 4]);
        } catch (Exception ignored) {

        }

        return (hour * 100 * 60 * 60 + minutes * 100 * 60 + seconds * 100 + ms) * 10;
    }
}

歌词文本解析

public class LrcEntity {

    public List<LrcLineEntity> lrcLines;
    public long totalLength;

    /**
     * 对多行歌词进行解析
     *
     * @param lrcContent 歌词内容
     * @return
     */
    @Nullable
    public static LrcEntity parse(@NonNull String lrcContent) {
        try {
            // 转换成流
            return parseStream(new ByteArrayInputStream(lrcContent.getBytes()));
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }

    /**
     * 根据输入流进行解析
     *
     * @param inputStream
     * @return
     * @throws IOException
     */
    @NonNull
    public static LrcEntity parseStream(@NonNull InputStream inputStream) throws IOException {
        LrcEntity result = new LrcEntity();
        List<LrcLineEntity> lines = new ArrayList<>();

        BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream));

        String line = null;
        while ((line = reader.readLine()) != null) {
            lines.addAll(LrcLineEntity.parseLine(line));
        }

        reader.close();

        // 所有行解析后对让行根据时间进行排序
        Collections.sort(lines, new Comparator<LrcLineEntity>() {
            @Override
            public int compare(LrcLineEntity o1, LrcLineEntity o2) {
                return (int) (o1.startPosition - o2.startPosition);
            }
        });
        int lineSize = lines.size();

        // 记录歌词总长度
        result.totalLength = lines.get(lineSize - 1).startPosition;
        result.lrcLines = lines;

        return result;

    }

    public int lineCount() {
        return lrcLines.size();
    }

}

至此，数据模型方面的代码就已经完成了。

View编写

因为歌词可能有很多行组成，但是屏幕上可视的View是有限的，所以推荐使用ListView或者RecyclerView去实现。

LrcView

public class LrcView extends ListView {

    private LrcAdapter mAdapter;

    public LrcView(Context context) {
        this(context, null);
    }

    public LrcView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public LrcView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setOverScrollMode(OVER_SCROLL_NEVER);
        mAdapter = new LrcAdapter();
        setAdapter(mAdapter);
    }
}

LrcAdapter

public class LrcAdapter extends BaseAdapter {

    private LrcEntity mData; // 数据源
    private int mCurrentPosition; // 当前播放的歌曲位置，一般会有突出的效果

    @Override
    public int getCount() {
        return mData == null ? 0 : mData.lineCount();
    }

    @Override
    public Object getItem(int position) {
        return mData == null ? null : mData.lrcLines.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            convertView = LayoutInflater.from(parent.getContext()).inflate(R.layout.line_text, parent, false);
        }

        TextView textView = (TextView) convertView;

        textView.setText(mData.lrcLines.get(position).content);

        if (mCurrentPosition == position) {
            // 当前播放的歌词显示黑色
            textView.setTextColor(Color.BLACK);
        } else {
            // 其他情况显示灰色
            textView.setTextColor(Color.GRAY);
        }

        return textView;
    }

    public void setData(LrcEntity data) {
        this.mData = data;
        notifyDataSetChanged();
    }

    public LrcEntity getData() {
        return mData;
    }

    public void setCurrentPosition(int currentPosition) {
        this.mCurrentPosition = currentPosition;
        notifyDataSetChanged();
    }

    public int getCurrentPosition() {
        return mCurrentPosition;
    }
}

line_text.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:padding="5dp"
    android:text="hello world"
    android:textColor="#000"
    android:textSize="16dp">

</TextView>

Adapter和布局都比较简单，下面针对LrcView进行说明
主要思想是根据mStartTime和当前时间去计算一个差值计算得出一个相对时间值，然后对歌词进行遍历，找出符合结果的。如果是暂停操作，那么就记录mPauseTime值，start操作时根据mPauseTime - mStartTime计算得出已经播放的时间，然后再根据该值给mStartTime赋予正确的值，这样就能让start和pause的时间衔接上
LrcView

public class LrcView extends ListView {

    private LrcAdapter mAdapter;
    private int mOldPosition = -1; // 用于优化，记录上次高亮位置
    private long mStartTime = 0; // 用于计算相对时间

    // mPauseTime - mStartTime就是已经播放的时间，主要用户pause之后再start，对mStartTime正确赋值
    private long mPauseTime = 0;

    private volatile boolean mIsStart = false;

    private Runnable mSetPositionRunnable = new Runnable() {
        @Override
        public void run() {
            if (!mIsStart) {
                // 因为在消息队列中，所以会有延迟，基于mIsStart进行判断
                return;
            }
            setPosition((int) (System.currentTimeMillis() - mStartTime));

            // 用于循环
            postDelayed(mSetPositionRunnable, 100);
        }
    };


    public LrcView(Context context) {
        this(context, null);
    }

    public LrcView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public LrcView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setOverScrollMode(OVER_SCROLL_NEVER);
        mAdapter = new LrcAdapter();
        setAdapter(mAdapter);
    }


    public void setLrc(String lrcContent) {
        reset();
        mAdapter.setData(LrcEntity.parse(lrcContent));
    }

    public void setLrc(InputStream inputStream) throws IOException {
        reset();
        mAdapter.setData(LrcEntity.parseStream(inputStream));
    }

    /**
     * 根据已经播放的相对位置进行UI更新
     *
     * @param position 单位ms，已经播放的时间
     */
    private void setPosition(int position) {
        if (mAdapter.getData() == null) {
            return;
        }
        int currentPosition = mAdapter.getCurrentPosition();
        int newPosition = -1;
        List<LrcLineEntity> lrcLines = mAdapter.getData().lrcLines;
        int size = lrcLines.size();

        // 最常见的情况就是一句挨着一句，所以先从当前位置开始遍历
        for (int i = currentPosition + 1; i < size; i++) {
            LrcLineEntity entity = lrcLines.get(i);
            if (entity.startPosition > position) {
                newPosition = i - 1;
                break;
            }
        }

        if (newPosition == -1) {
            // 如果遍历不到，那么就从头开始遍历
            for (int i = 0; i < currentPosition; i++) {
                LrcLineEntity entity = lrcLines.get(i);
                if (entity.startPosition > position) {
                    newPosition = i - 1;
                    break;
                }
            }
        }


        if (newPosition == mOldPosition) {
            // 两次找到歌词是一样的位置，那么就不更新UI了
            return;
        }

        if (newPosition == -1) {
            // 当前位置已经超出所有歌词所在时间范围内，停留在最后一句歌词
            pause();
            return;
        }

        mAdapter.setCurrentPosition(newPosition);

        // 计算一半屏幕可容纳的View的数量
        int halfOfVisibleCount = (getLastVisiblePosition() - getFirstVisiblePosition()) / 2;

        int scrollPosition = 0;

        // 歌词居中操作
        if (mOldPosition + halfOfVisibleCount < getLastVisiblePosition()) {
            // 歌词从下滚到上面，要让高亮歌词居中则少滚动半屏幕行数
            scrollPosition = newPosition >= (halfOfVisibleCount) ? newPosition - halfOfVisibleCount : newPosition;
        } else {
            // 歌词从上滚到下面，要让高亮歌词居中则多滚动半屏幕行数
            scrollPosition = newPosition >= (halfOfVisibleCount) ? newPosition + halfOfVisibleCount : newPosition;
        }

        smoothScrollToPosition(scrollPosition);

        mOldPosition = newPosition;
    }

    /**
     * 重置
     */
    public void reset() {
        mIsStart = false;
        mStartTime = 0;
        mPauseTime = 0;
        mOldPosition = -1;
        mAdapter.setCurrentPosition(-1);
        setPosition(0);
    }

    /**
     * 开始播放歌词
     */
    public void start() {
        if (mIsStart) {
            return;
        }
        mStartTime = System.currentTimeMillis() - (mPauseTime - mStartTime);
        mIsStart = true;
        post(mSetPositionRunnable);
    }

    /**
     * 暂停播放歌词
     */
    public void pause() {
        if (!mIsStart) {
            return;
        }
        mPauseTime = System.currentTimeMillis();
        mIsStart = false;
    }

    /**
     * 移动相对位置
     *
     * @param position 单位ms，已经播放的时间
     */
    public void seekTo(int position) {
        if (position < 0 || position > mAdapter.getData().totalLength) {
            return;
        }

        mStartTime = System.currentTimeMillis() - position;
        mPauseTime = 0;

        // 下次更新UI强制刷新
        mOldPosition = -1;
        mAdapter.setCurrentPosition(-1);
    }
}