Flutter實戰 | 從 0 搭建「網易雲音樂」APP（五、播放功能邏輯）

Flutter筆記發表於2019-10-24
FlutterAPP

本系列可能會伴隨大家很長時間，這裡我會從0開始搭建一個「網易雲音樂」的APP出來。

下面是該APP 功能的思維導圖：

Flutter實戰 | 從 0 搭建「網易雲音樂」APP（五、播放功能邏輯）

前期回顧：

  1. Flutter實戰 | 從 0 搭建「網易雲音樂」APP（一、建立專案、新增外掛、通用程式碼）
  2. Flutter實戰 | 從 0 搭建「網易雲音樂」APP（二、Splash Page、登入頁、發現頁）
  3. Flutter實戰 | 從 0 搭建「網易雲音樂」APP（三、每日推薦、推薦歌單）
  4. Flutter實戰 | 從 0 搭建「網易雲音樂」APP（四、排行榜、播放頁面）

本篇為第五篇，在這裡我們會搭建播放歌曲和播放歌曲一系列的邏輯。

Flutter實戰 | 從 0 搭建「網易雲音樂」APP（五、播放功能邏輯）

播放歌曲及其功能

我們整個APP的重中之重就是「播放歌曲」。（廢話，一個音樂播放軟體不放歌幹嘛？）

在上一篇文章當中已經對UI有了一個大體的認識，接下來就是要對「播放歌曲」所有的功能有一個瞭解：

  1. 首先肯定是能播放
  2. 暫停
  3. 上一曲、下一曲
  4. 歌詞
  5. 進度條

對於播放來說，我選擇的是 luanpotter - audioplayers，這個庫提供了我們對播放音樂需要的所有功能。

有了它以後我們就可以根據需求來封裝一個控制歌曲播放的類 PlaySongsModel。

1. 初始化播放器

老套路，看文件。

一共有兩種初始化的方法：

  1. AudioPlayer audioPlayer = AudioPlayer();
  2. AudioPlayer audioPlayer = AudioPlayer(mode: PlayerMode.LOW_LATENCY);

第一種是適合我們的方法，只能同時播放一個音訊。

第二種文件上說是適合遊戲聲音，這種模式下不會觸發總時間和當前時間的更新，也不能把音訊跳轉到特定的位置，有點像廣播的意思。

光初始化還不夠，我們還要在 Android 上設定引數：

Android 如果想要長時間播放音訊，則需要新增許可權：WAKE_LOCK

另外兩個平臺想要播放非 https的音訊，也要設定一些引數，具體就請百度。

我們的播放器全域性肯定就只需要一個，而且需要共享。

這個時候我們就會想到了 Provider。

而且只需要在首頁初始化就好了，所以初始化程式碼如下：

void init() {
  _audioPlayer.setReleaseMode(ReleaseMode.STOP);
  // 播放狀態監聽
  _audioPlayer.onPlayerStateChanged.listen((state) {
    _curState = state;
    /// 先做順序播放
    if(state == AudioPlayerState.COMPLETED){
      nextPlay();
    }
    // 其實也只有在播放狀態更新時才需要通知。
    notifyListeners();
  });
  _audioPlayer.onDurationChanged.listen((d) {
    curSongDuration = d;
  });
  // 當前播放進度監聽
  _audioPlayer.onAudioPositionChanged.listen((Duration p) {
    sinkProgress(p.inMilliseconds > curSongDuration.inMilliseconds ? curSongDuration.inMilliseconds : p.inMilliseconds);
  });
}
複製程式碼

這裡也新增了一些監聽：

  1. 播放狀態的監聽
  2. 歌曲長度的監聽
  3. 當前播放進度的監聽

在 main.dart 中：

runApp(MultiProvider(
  providers: [
    ChangeNotifierProvider<UserModel>.value(
      value: UserModel(),
    ),
    ChangeNotifierProvider<PlaySongsModel>(
      builder: (_) => PlaySongsModel()..init(),
    ),
  ],
  child: MyApp(),
));
}
複製程式碼

這樣就完成了我們播放器的初始化工作。

2. 播放功能

當我們點選某一個音樂、或者「播放全部」的時候，這個時候該怎麼操作？

首先排除一點：播放歌曲等操作絕對是不可能在播放歌曲頁面操作的。

因為後續要在每一個頁面中都會有一個播放的控制器。

而且「每日推薦」和「歌單」列表返回的資料有些不同。

那我們就自定義一個類，來接收你所想要播放的音樂：

class Song{
  int id;         // 歌曲id
  String name;    // 歌曲名稱
  String artists;  // 演唱者
  String picUrl;  // 歌曲圖片

  Song(this.id, {this.name, this.artists, this.picUrl});

  @override
  String toString() {
    return 'Song{id: $id, name: $name, artists: $artists}';
  }
}
複製程式碼

然後在 Provider 的 model 當中定義方法：

List<Song> _songs = [];

// 播放一首歌
void playSong(Song song) {
  _songs.insert(curIndex, song);
  play();
}

// 播放很多歌
void playSongs(List<Song> songs, {int index}) {
  this._songs = songs;
  if (index != null) curIndex = index;
  play();
}

// 新增歌曲
void addSongs(List<Song> songs) {
  this._songs.addAll(songs);
}

// 播放
void play() {
  _audioPlayer.play(
    "https://music.163.com/song/media/outer/url?id=${this._songs[curIndex].id}.mp3");
}
複製程式碼

最後當我們點選某一個歌曲或者「播放全部」的時候，只需要呼叫 model 當中的方法，把整首歌單、或者單一的曲子加入到當前播放的佇列當中就好了。

3. 播放頁面

當我們開始播放的時候需要跳轉到「播放頁面」，而這個時候我們的播放頁面的邏輯就非常簡單了。

只需要在頁面套上 Consumer 獲取到當前所播放的歌曲就好了。

根本不需要我們傳入任何東西：

// 大致程式碼
var curSong = model.curSong;
if (model.curState == AudioPlayerState.PLAYING) {
  // 如果當前狀態是在播放當中，則唱片一直旋轉，
  // 並且唱針是移除狀態
  _controller.forward();
  _stylusController.reverse();
} else {
  _controller.stop();
  _stylusController.forward();
}

Utils.showNetImage(
  curSong.picUrl,	 // 當前圖片
),    
Column(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Text(
      model.curSong.name,	// 當前歌曲名字
      style: commonWhiteTextStyle,
    ),
    Text(
      model.curSong.artists,	// 當前藝術家
      style: smallWhite70TextStyle,
    ),
  ],
),

複製程式碼

這樣就直接能把我們的頁面畫出來了。

4. 暫停、上一首、下一首、碟片旋轉

在我們進入播放頁面的時候，判斷一下當前歌曲的狀態，就能來控制唱針和碟片的狀態：

var curSong = model.curSong;
if (model.curState == AudioPlayerState.PLAYING) {
  // 如果當前狀態是在播放當中，則唱片一直旋轉，
  // 並且唱針是移除狀態
  _controller.forward();
  _stylusController.reverse();
} else {
  _controller.stop();
  _stylusController.forward();
}
複製程式碼

如果當前狀態是在播放當中，則唱片一直旋轉，並且唱針是移除狀態。

在初始化的時候我們監聽了當前歌曲的狀態，每當我們做出操作的時候，都會對應著一個狀態、並且進行 notifyListeners：


/// 暫停、恢復
void togglePlay(){
  if (_audioPlayer.state == AudioPlayerState.PAUSED) {
    resumePlay();
  } else {
    pausePlay();
  }
}

// 暫停
void pausePlay() {
  _audioPlayer.pause();
}

/// 跳轉到固定時間
void seekPlay(int milliseconds){
  _audioPlayer.seek(Duration(milliseconds: milliseconds));
  resumePlay();
}

/// 恢復播放
void resumePlay() {
  _audioPlayer.resume();
}

/// 下一首
void nextPlay(){
  if(curIndex >= _songs.length){
    curIndex = 0;
  }else{
    curIndex++;
  }
  play();
}

void prePlay(){
  if(curIndex <= 0){
    curIndex = _songs.length - 1;
  }else{
    curIndex--;
  }
  play();
}
複製程式碼

所以在我們做出一系列的操作後，都會通知到頁面上，然後根據相對應的狀態進行處理就好了。

5. 對播放進度進行處理

當我們的歌曲能播放後，接下來的重點就是在播放進度上了。

首先看一下監聽返回的值是什麼：

// 總進度
_audioPlayer.onDurationChanged.listen((d) {
  curSongDuration = d;
});
// 當前播放進度監聽
_audioPlayer.onAudioPositionChanged.listen((Duration p) {
  // xxx
});
複製程式碼

emm..是一個Duration，那我們可以使用 duration.inMilliseconds 來獲取時間戳。

而且這個監聽事件間隔非常短，所以我們肯定是不可能用 setState() 來更新頁面，這樣肯定會造成非常嚴重的後果。

那這裡我們就可以使用 StreamBuilder 來進行操作，每有一次當前進度的更新，就用stream 的方式傳送出去，然後更新頁面。

// 歌曲進度
void sinkProgress(int m){
  _curPositionController.sink.add('$m-${curSongDuration.inMilliseconds}');
}
複製程式碼

這裡有個坑，就是 當前播放時間有可能會大於總時長！

所以我們在呼叫方法的時候要進行一次判斷：

sinkProgress(p.inMilliseconds > curSongDuration.inMilliseconds ? curSongDuration.inMilliseconds : p.inMilliseconds);
複製程式碼

如果當前播放時間大於了總時間，那麼就傳入總時間。

然後在播放頁面：

Widget build(BuildContext context) {
  return StreamBuilder<String>(
    stream: model.curPositionStream,
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        var totalTime =
          snapshot.data.substring(snapshot.data.indexOf('-') + 1);
        var curTime = double.parse(snapshot.data.substring(0, snapshot.data.indexOf('-')));
        var curTimeStr = DateUtil.formatDateMs(curTime.toInt(), format: "mm:ss");
        return buildProgress(curTime, totalTime, curTimeStr);
      } else {
        return buildProgress(0, "0", "00:00");
      }
    },
  );
}
複製程式碼

歌曲狀態是播放中，但是很有可能是還沒開始播放（網路問題），所以我們要判斷是否有有資料。

資料是我們自己傳入的，獲取到資料後傳入方法中就ok了。

buildProgress 方法：

return Container(
  height: ScreenUtil().setWidth(120),
  child: Row(
    children: <Widget>[
      Text(
        curTimeStr,
        style: smallWhiteTextStyle,
      ),
      Expanded(
        child: SliderTheme(
          data: SliderThemeData(
            trackHeight: ScreenUtil().setWidth(2),
            thumbShape: RoundSliderThumbShape(
              enabledThumbRadius: ScreenUtil().setWidth(10),
            ),
          ),
          child: Slider(
            value: curTime,
            onChanged: (data) {
              model.sinkProgress(data.toInt());
            },
            onChangeStart: (data) {
              model.pausePlay();
            },
            onChangeEnd: (data) {
              model.seekPlay(data.toInt());
            },
            activeColor: Colors.white,
            inactiveColor: Colors.white30,
            min: 0,
            max: double.parse(totalTime),
          ),
        ),
      ),
      Text(
        DateUtil.formatDateMs(int.parse(totalTime), format: "mm:ss"),
        style: smallWhite30TextStyle,
      ),
    ],
  ),
);
複製程式碼

這裡進度條使用的控制元件是Slider，設定幾個引數：

  1. value：當前值
  2. onChanged：拖拽過程中
  3. onChangeStart：開始拖拽
  4. onChangeEnd：拖拽結束
  5. activeColor：活動過的color
  6. inactiveColor：還沒活動過的color
  7. min：最小值
  8. max：最大值

這裡最大值我們直接設定成當前歌曲的Duration，這樣做好處有很多：

  1. 我們不需要計算當前的duration 和總時間的差
  2. 拖動的時候也不需要計算
  3. 拖動結束後直接把結束的值返回給播放器就可以達到拖拽進度的效果

而且在 onChangeStart onChangeEnd 這兩個回撥中呼叫播放器的 暫停 和 播放就好了。

（總感覺這個控制元件就是為了這個需求創造的，23333）

這樣就完成了我們的進度條的邏輯。

最後再來看一下效果：

Flutter實戰 | 從 0 搭建「網易雲音樂」APP（五、播放功能邏輯）

總結

歌詞功能、正在播放功能這週會跟上，大家敬請期待！

該系列文章程式碼已傳至 GitHub：github.com/wanglu1209/…

另我個人建立了一個「Flutter 交流群」，可以新增我個人微信 「17610912320」來入群。

Flutter實戰 | 從 0 搭建「網易雲音樂」APP（五、播放功能邏輯）

相關文章