Android同步GraphView移动与MediaPlayer播放实现咨询

嘿，刚好之前做过类似的音轨同步可视化需求，给你分享几个落地性强的实现思路，完美适配你现在的场景：

本质上就是让MediaPlayer的播放进度和音高数据的时间戳精准绑定，然后实时驱动GraphView更新。下面分步骤来：

1. 先把音高数据处理成好查的格式 #

你现在的音高数据是每行0,14:23281,61这种格式，首先得把时间部分转换成毫秒级的时间戳（和MediaPlayer的getCurrentPosition()返回值格式统一），比如14:23281要转成14*60*1000 + 23281 = 1073281毫秒。

然后把所有数据存进一个排序后的映射结构里，方便快速根据当前播放进度找对应音高：

// Java示例：用TreeMap自动按时间戳排序
private TreeMap<Long, Integer> pitchTimeMap = new TreeMap<>();

// 读取txt文件后解析每行数据
private void parsePitchData(List<String> pitchLines) {
    for (String line : pitchLines) {
        String[] parts = line.split(",");
        // 假设第二部分是时间字符串，比如"14:23281"
        String timeStr = parts[1];
        String[] timeParts = timeStr.split(":");
        long minutes = Long.parseLong(timeParts[0]);
        long ms = Long.parseLong(timeParts[1]);
        long totalMs = minutes * 60 * 1000 + ms;
        // 第三部分是音高数值
        int pitch = Integer.parseInt(parts[2]);
        pitchTimeMap.put(totalMs, pitch);
    }
}

2. 用MediaPlayer的进度回调驱动更新 #

别用死循环轮询进度，用Handler（Java）或者Coroutine（Kotlin）做定期回调，既高效又避免内存泄漏：

Java版本 #

private Handler progressHandler = new Handler(Looper.getMainLooper());
private Runnable updateRunnable = new Runnable() {
    @Override
    public void run() {
        if (mediaPlayer != null && mediaPlayer.isPlaying()) {
            long currentProgress = mediaPlayer.getCurrentPosition();
            // 根据当前进度更新GraphView
            updatePitchGraph(currentProgress);
            // 每50ms更新一次，可根据视觉流畅度调整
            progressHandler.postDelayed(this, 50);
        }
    }
};

// 启动播放时触发回调
mediaPlayer.setOnPreparedListener(mp -> {
    mp.start();
    progressHandler.post(updateRunnable);
});

// 暂停/结束时要及时移除回调，防止内存泄漏
mediaPlayer.setOnCompletionListener(mp -> progressHandler.removeCallbacks(updateRunnable));
mediaPlayer.setOnPauseListener(mp -> progressHandler.removeCallbacks(updateRunnable));

Kotlin版本（更简洁安全） #

lifecycleScope.launch {
    repeatOnLifecycle(Lifecycle.State.STARTED) {
        while (mediaPlayer.isPlaying) {
            val currentProgress = mediaPlayer.currentPosition
            updatePitchGraph(currentProgress)
            delay(50)
        }
    }
}

3. 实现GraphView的实时更新逻辑 #

假设你用的是常用的GraphView库，这里分两种场景处理：

场景1：实时滚动展示最近的音高曲线 #

适合做类似波形图的动态效果：

private LineGraphSeries<DataPoint> pitchSeries;

private void updatePitchGraph(long currentMs) {
    // 找到当前进度对应的最近音高
    Long closestTime = pitchTimeMap.floorKey(currentMs);
    if (closestTime == null) return;
    int currentPitch = pitchTimeMap.get(closestTime);

    // 添加新数据点，保留最近100个点（可调整）
    pitchSeries.appendData(new DataPoint(currentMs / 1000.0, currentPitch), true, 100);
    // 自动滚动视口到当前位置
    graphView.getViewport().setMinX((currentMs - 2000) / 1000.0); // 显示最近2秒
    graphView.getViewport().setMaxX(currentMs / 1000.0);
    graphView.getViewport().setScrollable(true);
}

场景2：展示整首歌的音高曲线，跟随播放进度移动 #

适合用户能看到全局音高走势的需求：

private void updatePitchGraph(long currentMs) {
    // 找到当前音高并高亮（比如在曲线对应位置加标记）
    Integer currentPitch = pitchTimeMap.get(currentMs);
    if (currentPitch != null) {
        // 示例：添加一个红色标记点
        DataPoint highlightPoint = new DataPoint(currentMs / 1000.0, currentPitch);
        highlightSeries.resetData(new DataPoint[]{highlightPoint});
    }
    // 移动视口到当前播放位置
    graphView.getViewport().setCenterX(currentMs / 1000.0);
}

4. 优化同步精度的细节 #

• 进度校准：如果音高数据的时间戳和MediaPlayer的播放进度有偏差，可以找歌曲开头的第一个音高时间点，计算和MediaPlayer启动时间的偏移量，之后用currentProgress + offset去匹配音高。
• 拖动进度同步：给MediaPlayer设置OnSeekCompleteListener，在用户拖动进度条完成后，立刻调用一次updatePitchGraph，确保视图同步跳转。
• 避免UI卡顿：所有GraphView的更新操作必须在主线程执行，上面的Handler和Coroutine都是主线程上下文，没问题；预处理音高数据要在子线程完成，别阻塞UI。

内容的提问来源于stack exchange，提问作者user9441470