淘特cms
當前位置:淘特CMS->幫助中心->常見問題
android里教你如何制作一個音樂同步顯示歌詞的應用
  • 作者:
  • 日期:2016/4/12 11:05:27
  • 出處:淘特CMS
  • 點擊:

最近在做一款android手機上的英語聽力播放器,學習到了很多東西,像是Fragment,ActionBar的使用等等,這里就先介紹一下歌詞同步的實現問題。

歌詞同步的實現思路很簡單:獲取歌詞文件LRC中的時間和歌詞內容,然后在指定的時間內播放相應的內容。獲取不難,難就在于如何在手機屏幕上實現歌詞的滾動。

先上效果圖:


我先準備一個歌詞文件,先大概看一看里面的內容:

[ti:兄弟干杯] 
[ar:秦博] 
[t_time:(03:20)] 
[00:00.00] 兄弟干杯
[00:02.50] 作詞:秦博
[00:05.00] 作曲:周宏濤
[00:07.50] 演唱:秦博
[00:10.00] 編曲:龍奔
[00:12.50] RAP詞:劉闖 黃永軍
[00:15.00] LRC BY :吉時雨
[00:17.50] QQ:132 7269 041
[00:20.00] www.cnLyric.com
[00:25.18] 男人在社會 酒一定要學會
[00:29.25] 煩了累了失戀了 只要你來陪
[00:33.46] 酒這東西咱別說那賤與貴
[00:37.62] 酸甜苦辣倒進杯 忘了是與非
[00:41.79] 現在的社會 美女是一大堆
[00:45.87] 不富不帥不理咱 不跟咱約會
[00:50.14] 人要活著就別讓那心太累
[00:54.26] 金錢名利淡如水 不如啊醉一回
[00:58.52] 來來來 兄弟 干了這一杯
[01:02.62] 誰大誰小無所謂 有酒今朝醉
[01:06.80] 來來來 兄弟 干了這一杯
[01:10.94] 出門在外不容易 辛酸講給誰
[01:15.14] 來來來 兄弟 干了這一杯
[01:19.29] 別管天南和地北 此時最陶醉
[01:23.50] 來來來 兄弟 干了這一杯
[01:27.65] 酒逢知己千杯少 人生醉幾回
[01:31.95] RAP:深夜街頭來買醉 究竟為了誰
[01:36.02] 看破紅塵的卑微 口是與心非
[01:40.14] 種種挫折無所謂 勇敢來面對
[01:44.30] 不枉人間走一回 男兒不流淚
[01:48.60] 現在的社會 美女是一大堆
[01:52.75] 不富不帥不理咱 不跟咱約會
[01:56.88] 人要活著就別讓那心太累
[02:01.03] 金錢名利淡如水 不如啊醉一回
[02:05.30] 來來來 兄弟 干了這一杯
[02:09.39] 誰大誰小無所謂 有酒今朝醉
[02:13.58] 來來來 兄弟 干了這一杯
[02:17.77] 出門在外不容易 辛酸講給誰
[02:21.94] 來來來 兄弟 干了這一杯
[02:26.11] 別管天南和地北 此時最陶醉
[02:30.28] 來來來 兄弟 干了這一杯
[02:34.42] 酒逢知己千杯少 人生醉幾回
[02:38.65] 來來來 兄弟 干了這一杯
[02:42.79] 誰大誰小無所謂 有酒今朝醉
[02:46.96] 來來來 兄弟 干了這一杯
[02:51.16] 出門在外不容易 辛酸講給誰
[02:55.34] 來來來 兄弟 干了這一杯
[02:59.46] 別管天南和地北 此時最陶醉
[03:03.63] 來來來 兄弟 干了這一杯
[03:07.83] 酒逢知己千杯少 人生醉幾回
看到了,每段歌詞前面都有一個開始時間,那一段的時間就是這一段的結束時間,那原理明白了,就開始準備代碼。

先從最基本的讀取歌詞文件開始:

Public class LrcHandle {
    private ListmWords = new ArrayList();
    private ListmTimeList = new ArrayList();

    //處理歌詞文件
    public void readLRC(String path) {
        File file = new File(path);

        try {
            FileInputStream fileInputStream = new FileInputStream(file);
            InputStreamReader inputStreamReader = new InputStreamReader(
                    fileInputStream, "utf-8");
            BufferedReader bufferedReader = new BufferedReader(
                    inputStreamReader);
            String s = "";
            while ((s = bufferedReader.readLine()) != null) {
                addTimeToList(s);
                if ((s.indexOf("[ar:") != -1) || (s.indexOf("[ti:") != -1)
                        || (s.indexOf("[by:") != -1)) {
                    s = s.substring(s.indexOf(":") + 1, s.indexOf("]"));
                } else {
                    String ss = s.substring(s.indexOf("["), s.indexOf("]") + 1);
                    s = s.replace(ss, "");
                }
                mWords.add(s);
            }

            bufferedReader.close();
            inputStreamReader.close();
            fileInputStream.close();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
            mWords.add("沒有歌詞文件,趕緊去下載");
        } catch (IOException e) {
            e.printStackTrace();
            mWords.add("沒有讀取到歌詞");
        }
    }
   public ListgetWords() {
        return mWords;
   }

    public ListgetTime() {
        return mTimeList;
    }

    // 分離出時間
    private int timeHandler(String string) {
       string = string.replace(".", ":");
       String timeData[] = string.split(":");
// 分離出分、秒并轉換為整型
        int minute = Integer.parseInt(timeData[0]);
        int second = Integer.parseInt(timeData[1]);
        int millisecond = Integer.parseInt(timeData[2]);

        // 計算上一行與下一行的時間轉換為毫秒數
        int currentTime = (minute * 60 + second) * 1000 + millisecond * 10;

        return currentTime;
    }

   private void addTimeToList(String string) {
        Matcher matcher = Pattern.compile(
                "\\[\\d{1,2}:\\d{1,2}([\\.:]\\d{1,2})?\\]").matcher(string);
        if (matcher.find()) {
            String str = matcher.group();
            mTimeList.add(new LrcHandle().timeHandler(str.substring(1,
                    str.length() - 1)));
        }

    }
}

 一般歌詞文件的格式大概如下:

[ar:藝人名]

[ti:曲名]

[al:專輯名]

[by:編者(指編輯LRC歌詞的人)]

[offset:時間補償值] 其單位是毫秒,正值表示整體提前,負值相反。這是用于總體調整顯示快慢的。

但也不一定,有時候并沒有前面那些ar:等標識符,所以我們這里也提供了另一種解析方式。

歌詞文件中的時間格式則比較統一:[00:00.50]等等,00:表示分鐘,00.表示秒數,.50表示毫秒數,當然,我們最后是要將它們轉化為毫秒數處理才比較方便。

處理完歌詞文件并得到我們想要的數據后,我們就要考慮如何在手機上滾動顯示我們的歌詞并且與我們得到的時間同步了。

先是布局文件:


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<Button
android:id="@+id/button"
android:layout_width="60dip"
android:layout_height="60dip"
android:text="@string/停止" />
<com.example.slidechange.WordView
android:id="@+id/text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/button" />

WordView是自定義的TextView,它繼承自TextView:

public class WordView extends TextView {
private List mWordsList = new ArrayList();
private Paint mLoseFocusPaint;
private Paint mOnFocusePaint;
private float mX = 0;
private float mMiddleY = 0;
private float mY = 0;
private static final int DY = 50;
private int mIndex = 0;
public WordView(Context context) throws IOException {
super(context);
init();
}
public WordView(Context context, AttributeSet attrs) throws IOException {
super(context, attrs);
init();
}
public WordView(Context context, AttributeSet attrs, int defStyle)
throws IOException {
super(context, attrs, defStyle);
init();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(Color.BLACK);
Paint p = mLoseFocusPaint;
p.setTextAlign(Paint.Align.CENTER);
Paint p2 = mOnFocusePaint;
p2.setTextAlign(Paint.Align.CENTER);
canvas.drawText(mWordsList.get(mIndex), mX, mMiddleY, p2);
int alphaValue = 25;
float tempY = mMiddleY;
for (int i = mIndex - 1; i >= 0; i--) {
tempY -= DY;
if (tempY < 0) {
break;
}
p.setColor(Color.argb(255 - alphaValue, 245, 245, 245));
canvas.drawText(mWordsList.get(i), mX, tempY, p);
alphaValue += 25;
}
alphaValue = 25;
tempY = mMiddleY;
for (int i = mIndex + 1, len = mWordsList.size(); i < len; i++) {
tempY += DY;
if (tempY > mY) {
break;
}
p.setColor(Color.argb(255 - alphaValue, 245, 245, 245));
canvas.drawText(mWordsList.get(i), mX, tempY, p);
alphaValue += 25;
}
mIndex++;
}
@Override
protected void onSizeChanged(int w, int h, int ow, int oh) {
super.onSizeChanged(w, h, ow, oh);
mX = w * 0.5f;
mY = h;
mMiddleY = h * 0.3f;
}
@SuppressLint("SdCardPath")
private void init() throws IOException {
setFocusable(true);
LrcHandle lrcHandler = new LrcHandle();
lrcHandler.readLRC("/sdcard/陪我去流浪.lrc");
mWordsList = lrcHandler.getWords();
mLoseFocusPaint = new Paint();
mLoseFocusPaint.setAntiAlias(true);
mLoseFocusPaint.setTextSize(22);
mLoseFocusPaint.setColor(Color.WHITE);
mLoseFocusPaint.setTypeface(Typeface.SERIF);
mOnFocusePaint = new Paint();
mOnFocusePaint.setAntiAlias(true);
mOnFocusePaint.setColor(Color.YELLOW);
mOnFocusePaint.setTextSize(30);
mOnFocusePaint.setTypeface(Typeface.SANS_SERIF);
}
}

最主要的是覆蓋TextView的onDraw()和onSizeChanged()。

在onDraw()中我們重新繪制TextView,這就是實現歌詞滾動實現的關鍵。歌詞滾動的實現思路并不復雜:將上一句歌詞向上移動,當前歌詞字體變大,顏色變黃突出顯示。

我們需要設置位移量DY = 50。顏色和字體大小我們可以通過設置Paint來實現。

我們注意到,在我實現的效果中,距離當前歌詞越遠的歌詞,就會變透明,這個可以通過p.setColor(Color.argb(255 - alphaValue, 245, 245, 245))來實現。

接著就是主代碼:

public class MainActivity extends Activity {
private WordView mWordView;
private List mTimeList;
private MediaPlayer mPlayer;
@SuppressLint("SdCardPath")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mPlayer.stop();
finish();
}
});
mWordView = (WordView) findViewById(R.id.text);
mPlayer = new MediaPlayer();
mPlayer.reset();
LrcHandle lrcHandler = new LrcHandle();
try {
lrcHandler.readLRC("/sdcard/陪我去流浪.lrc");
mTimeList = lrcHandler.getTime();
mPlayer.setDataSource("/sdcard/陪我去流浪.mp3");
mPlayer.prepare();
} catch (IOException e) {
e.printStackTrace();
} catch (IllegalArgumentException e) {
e.printStackTrace();
} catch (SecurityException e) {
e.printStackTrace();
} catch (IllegalStateException e) {
e.printStackTrace();
}
final Handler handler = new Handler();
mPlayer.start();
new Thread(new Runnable() {
int i = 0;
@Override
public void run() {
while (mPlayer.isPlaying()) {
handler.post(new Runnable() {
@Override
public void run() {
mWordView.invalidate();
}
});
try {
Thread.sleep(mTimeList.get(i + 1) - mTimeList.get(i));
} catch (InterruptedException e) {
}
i++;
if (i == mTimeList.size() - 1) {
mPlayer.stop();
break;
}
}
}
}).start();
}
}

歌詞的顯示需要重新開啟一個線程,因為主線程是播放歌曲的。

代碼很簡單,功能也很簡單,最主要的是多多嘗試,多多修改,就能明白代碼的原理了。

最新評論
用 戶:
內 容:
驗證碼:
千斤顶或更好100手免费试玩