Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發實例 >> Android上實現歌詞同步

Android上實現歌詞同步

編輯：Android開發實例

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

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

先上效果圖：

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

  1. public class LrcHandle {  
  2.     private List<String> mWords = new ArrayList<String>();  
  3.     private List<Integer> mTimeList = new ArrayList<Integer>();  
  4.  
  5.     //處理歌詞文件  
  6.     public void readLRC(String path) {  
  7.         File file = new File(path);  
  8.  
  9.         try {  
  10.             FileInputStream fileInputStream = new FileInputStream(file);  
  11.             InputStreamReader inputStreamReader = new InputStreamReader(  
  12.                     fileInputStream, "utf-8");  
  13.             BufferedReader bufferedReader = new BufferedReader(  
  14.                     inputStreamReader);  
  15.             String s = "";  
  16.             while ((s = bufferedReader.readLine()) != null) {  
  17.                 addTimeToList(s);  
  18.                 if ((s.indexOf("[ar:") != -1) || (s.indexOf("[ti:") != -1)  
  19.                         || (s.indexOf("[by:") != -1)) {  
  20.                     s = s.substring(s.indexOf(":") + 1, s.indexOf("]"));  
  21.                 } else {  
  22.                     String ss = s.substring(s.indexOf("["), s.indexOf("]") + 1);  
  23.                     s = s.replace(ss, "");  
  24.                 }  
  25.                 mWords.add(s);  
  26.             }  
  27.  
  28.             bufferedReader.close();  
  29.             inputStreamReader.close();  
  30.             fileInputStream.close();  
  31.         } catch (FileNotFoundException e) {  
  32.             e.printStackTrace();  
  33.             mWords.add("沒有歌詞文件，趕緊去下載");  
  34.         } catch (IOException e) {  
  35.             e.printStackTrace();  
  36.             mWords.add("沒有讀取到歌詞");  
  37.         }  
  38.     }  
  39.    public List<String> getWords() {  
  40.         return mWords;  
  41.    }  
  42.  
  43.     public List<Integer> getTime() {  
  44.         return mTimeList;  
  45.     }  
  46.  
  47.     // 分離出時間  
  48.     private int timeHandler(String string) {  
  49.        string = string.replace(".", ":");  
  50.        String timeData[] = string.split(":");  
  51. // 分離出分、秒並轉換為整型  
  52.         int minute = Integer.parseInt(timeData[0]);  
  53.         int second = Integer.parseInt(timeData[1]);  
  54.         int millisecond = Integer.parseInt(timeData[2]);  
  55.  
  56.         // 計算上一行與下一行的時間轉換為毫秒數  
  57.         int currentTime = (minute * 60 + second) * 1000 + millisecond * 10;  
  58.  
  59.         return currentTime;  
  60.     }  
  61.  
  62.    private void addTimeToList(String string) {  
  63.         Matcher matcher = Pattern.compile(  
  64.                 "\\[\\d{1,2}:\\d{1,2}([\\.:]\\d{1,2})?\\]").matcher(string);  
  65.         if (matcher.find()) {  
  66.             String str = matcher.group();  
  67.             mTimeList.add(new LrcHandle().timeHandler(str.substring(1,  
  68.                     str.length() - 1)));  
  69.         }  
  70.  
  71.     }  
  72. } 

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

[ar:藝人名] [ti:曲名] [al:專輯名] [by:編者（指編輯LRC歌詞的人）] [offset:時間補償值] 其單位是毫秒，正值表示整體提前，負值相反。這是用於總體調整顯示快慢的。 但也不一定，有時候並沒有前面那些ar:等標識符，所以我們這裡也提供了另一種解析方式。 歌詞文件中的時間格式則比較統一:[00:00.50]等等，00:表示分鐘，00.表示秒數，.50表示毫秒數，當然，我們最後是要將它們轉化為毫秒數處理才比較方便。 處理完歌詞文件並得到我們想要的數據後，我們就要考慮如何在手機上滾動顯示我們的歌詞並且與我們得到的時間同步了。 先是布局文件: 
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  3.     xmlns:tools="http://schemas.android.com/tools" 
  4.     android:layout_width="match_parent" 
  5.     android:layout_height="match_parent" 
  6.     tools:context=".MainActivity" > 
  7.  
  8.     <Button 
  9.         android:id="@+id/button" 
  10.         android:layout_width="60dip" 
  11.         android:layout_height="60dip" 
  12.         android:text="@string/停止" /> 
  13.  
  14.     <com.example.slidechange.WordView 
  15.         android:id="@+id/text" 
  16.         android:layout_width="match_parent" 
  17.         android:layout_height="match_parent" 
  18.         android:layout_below="@id/button" /> 
  19.  
  20. </RelativeLayout> 

 WordView是自定義的TextView，它繼承自TextView：

  1. public class WordView extends TextView {  
  2.     private List<String> mWordsList = new ArrayList<String>();  
  3.     private Paint mLoseFocusPaint;  
  4.     private Paint mOnFocusePaint;  
  5.     private float mX = 0;  
  6.     private float mMiddleY = 0;  
  7.     private float mY = 0;  
  8.     private static final int DY = 50;  
  9.     private int mIndex = 0;  
  10.  
  11.     public WordView(Context context) throws IOException {  
  12.         super(context);  
  13.         init();  
  14.     }  
  15.  
  16.     public WordView(Context context, AttributeSet attrs) throws IOException {  
  17.         super(context, attrs);  
  18.         init();  
  19.     }  
  20.  
  21.     public WordView(Context context, AttributeSet attrs, int defStyle)  
  22.             throws IOException {  
  23.         super(context, attrs, defStyle);  
  24.         init();  
  25.     }  
  26.  
  27.     @Override 
  28.     protected void onDraw(Canvas canvas) {  
  29.         super.onDraw(canvas);  
  30.  
  31.         canvas.drawColor(Color.BLACK);  
  32.         Paint p = mLoseFocusPaint;  
  33.         p.setTextAlign(Paint.Align.CENTER);  
  34.         Paint p2 = mOnFocusePaint;  
  35.         p2.setTextAlign(Paint.Align.CENTER);  
  36.  
  37.         canvas.drawText(mWordsList.get(mIndex), mX, mMiddleY, p2);  
  38.  
  39.         int alphaValue = 25;  
  40.         float tempY = mMiddleY;  
  41.         for (int i = mIndex - 1; i >= 0; i--) {  
  42.             tempY -= DY;  
  43.             if (tempY < 0) {  
  44.                 break;  
  45.             }  
  46.             p.setColor(Color.argb(255 - alphaValue, 245, 245, 245));  
  47.             canvas.drawText(mWordsList.get(i), mX, tempY, p);  
  48.             alphaValue += 25;  
  49.         }  
  50.         alphaValue = 25;  
  51.         tempY = mMiddleY;  
  52.         for (int i = mIndex + 1, len = mWordsList.size(); i < len; i++) {  
  53.             tempY += DY;  
  54.             if (tempY > mY) {  
  55.                 break;  
  56.             }  
  57.             p.setColor(Color.argb(255 - alphaValue, 245, 245, 245));  
  58.             canvas.drawText(mWordsList.get(i), mX, tempY, p);  
  59.             alphaValue += 25;  
  60.         }  
  61.         mIndex++;  
  62.     }  
  63.  
  64.     @Override 
  65.     protected void onSizeChanged(int w, int h, int ow, int oh) {  
  66.         super.onSizeChanged(w, h, ow, oh);  
  67.  
  68.         mX = w * 0.5f;  
  69.         mY = h;  
  70.         mMiddleY = h * 0.3f;  
  71.     }  
  72.  
  73.     @SuppressLint("SdCardPath")  
  74.     private void init() throws IOException {  
  75.         setFocusable(true);  
  76.  
  77.         LrcHandle lrcHandler = new LrcHandle();  
  78.         lrcHandler.readLRC("/sdcard/陪我去流浪.lrc");  
  79.         mWordsList = lrcHandler.getWords();  
  80.  
  81.         mLoseFocusPaint = new Paint();  
  82.         mLoseFocusPaint.setAntiAlias(true);  
  83.         mLoseFocusPaint.setTextSize(22);  
  84.         mLoseFocusPaint.setColor(Color.WHITE);  
  85.         mLoseFocusPaint.setTypeface(Typeface.SERIF);  
  86.  
  87.         mOnFocusePaint = new Paint();  
  88.         mOnFocusePaint.setAntiAlias(true);  
  89.         mOnFocusePaint.setColor(Color.YELLOW);  
  90.         mOnFocusePaint.setTextSize(30);  
  91.         mOnFocusePaint.setTypeface(Typeface.SANS_SERIF);  
  92.     }  
  93. } 

最主要的是覆蓋TextView的onDraw()和onSizeChanged()。
在onDraw()中我們重新繪制TextView，這就是實現歌詞滾動實現的關鍵。歌詞滾動的實現思路並不復雜：將上一句歌詞向上移動，當前歌詞字體變大，顏色變黃突出顯示。

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

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

接著就是主代碼：

  1. public class MainActivity extends Activity {  
  2.     private WordView mWordView;  
  3.     private List<Integer> mTimeList;  
  4.     private MediaPlayer mPlayer;  
  5.  
  6.     @SuppressLint("SdCardPath")  
  7.     @Override 
  8.     protected void onCreate(Bundle savedInstanceState) {  
  9.         super.onCreate(savedInstanceState);  
  10.         setContentView(R.layout.activity_main);  
  11.  
  12.         Button button = (Button) findViewById(R.id.button);  
  13.         button.setOnClickListener(new OnClickListener() {  
  14.  
  15.             @Override 
  16.             public void onClick(View v) {  
  17.                 mPlayer.stop();  
  18.                 finish();  
  19.             }  
  20.         });  
  21.  
  22.         mWordView = (WordView) findViewById(R.id.text);  
  23.  
  24.         mPlayer = new MediaPlayer();  
  25.         mPlayer.reset();  
  26.         LrcHandle lrcHandler = new LrcHandle();  
  27.         try {  
  28.             lrcHandler.readLRC("/sdcard/陪我去流浪.lrc");  
  29.             mTimeList = lrcHandler.getTime();  
  30.             mPlayer.setDataSource("/sdcard/陪我去流浪.mp3");  
  31.             mPlayer.prepare();  
  32.         } catch (IOException e) {  
  33.             e.printStackTrace();  
  34.         } catch (IllegalArgumentException e) {  
  35.             e.printStackTrace();  
  36.         } catch (SecurityException e) {  
  37.             e.printStackTrace();  
  38.         } catch (IllegalStateException e) {  
  39.             e.printStackTrace();  
  40.         }  
  41.         final Handler handler = new Handler();  
  42.         mPlayer.start();  
  43.         new Thread(new Runnable() {  
  44.             int i = 0;  
  45.  
  46.             @Override 
  47.             public void run() {  
  48.                 while (mPlayer.isPlaying()) {  
  49.                     handler.post(new Runnable() {  
  50.  
  51.                         @Override 
  52.                         public void run() {  
  53.                             mWordView.invalidate();  
  54.                         }  
  55.                     });  
  56.                     try {  
  57.                         Thread.sleep(mTimeList.get(i + 1) - mTimeList.get(i));  
  58.                     } catch (InterruptedException e) {  
  59.                     }  
  60.                     i++;  
  61.                     if (i == mTimeList.size() - 1) {  
  62.                         mPlayer.stop();  
  63.                         break;  
  64.                     }  
  65.                 }  
  66.             }  
  67.         }).start();  
  68.     }  
  69. } 

歌詞的顯示需要重新開啟一個線程，因為主線程是播放歌曲的。
代碼很簡單，功能也很簡單，最主要的是多多嘗試，多多修改，就能明白代碼的原理了。

因為本人是菜鳥，講得並不好，更多是貼出源碼好讓大家可以方便運行查看效果。

  1. 上一頁:
  2. 下一頁:
Android開發實例
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
Android Service學習之本地服務 Android HttpClient GET或者POST請求基本使用方法 android針對json數據解析方法實例分析 Android中程序的停止狀態詳細介紹 Android Bitmap和Canvas學習筆記 初次體驗Android，過程很艱辛！
Android MediaPlayer(多媒體播放)

Android提供了許多方法來控制播放的音頻/視頻文件和流。其中該方法是
Android MediaPlayer(多媒體播放)

Android提供了許多方法來控制播放的音頻/視頻文件和流。其中該方法是
Android登錄實例

登錄應用程序的屏幕，詢問憑據登錄到一些特定的應用。可能需要登錄到Face
Android加載Spinner

可以顯示在的Android任務，通過加載進度條的進展。進度條有兩種形狀。
閱讀排行版
Copyright © Android教程網 All Rights Reserved