欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

创建一个在线音乐播放器应用程序,使用Flutter实现

最编程 2024-08-15 14:18:45
...

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

目的

眼看上半年flutter大热,Google对其的支持也越来越多。忍不住也想体验一下。随即边看官方教程边动手开发了一个在线音乐播放器。目前实现的功能有歌单,歌曲播放、进度控制、歌词,歌名搜索,排行榜,本地收藏等功能。

感受

  1. dart:我的感受是,dart在语法上可以看作是强类型版的JavaScript。类型声明可以加强应用的健壮性,在大型应用开发中是非常有必要的。但是也会相应的增加开发耗时。例如:dart中所有声明但未初始化的变量默认值都为null,并且null不等于false。这就导致我这种习惯了JavaScript的前端er经常在运行应用之后得到null的引用错误。不过dart也提供了与JavaScript类似的async awit这种异步控制语法糖。总体来说,dart是一门与JavaScript非常相似的语言。
  2. UI:flutter应用里,UI层一定是由各种官方提供的组建组成的。大体结构类似HTML的DOM结构。不同的是,列表、流式布局这些结构无法单纯的用样式去实现,必须使用特定的组件(ListView、flow、wrap等)。flutter默认未内联样式,这就造成了结构与样式全都糅合在一起,看起来很不方便,可以用工厂函数生成结构相似的样式或组件。总体来说,flutter的UI层学习量比较大的是各种官方组件,包括他们的api还有趟各种坑。
  3. 第三分库:因为flutter还处于发展期,所以目前各种第三方库、插件数量都比较少。例如状态管理、视频、音频播放、各种和原生交互的库等。不过相信随着开发者的增多,以后第三方的支持也会越来越多。

项目截图

首页
歌单
播放
排行榜
搜索

实现

  • 状态管理:主要使用flutter-redux实现。具体使用方式和前端er常用的react-redux差不多。
// 首先我们需要创建一些actions
enum SongControllerActions {
  start
}

// 然后我们需要创建一个State类
class SongControllerState {
    bool _isPlaying;
    get isPlaying => _isPlaying;
	set isPlaying(val) => _isPlaying = val;
	SongControllerState(this.isPlaying);
    SongcontrollerState.initState() {
        _isPlaying = false;
    }
}

/* 然后我们需要创建一个reducer,通过判断不同的actions来对state进行修改,最后返回一个新的state
*/
SongControllerState SongControllerReducer(SongControllerState state, action) {
    if(action['type'] == SongControllerActions.start) {
        state.isPlaying = true;
    }
    return state;
}

/* 然后在我们创建完这些不同的state后,需要生成一个store,并将这个store挂载到我们的根组件上去 */
final store = Store<AppState>(appReducer, initialState: AppState(
	SongControllerState: SongControllerState.initState()
));
  • 播放控制:
    • 使用了audioplayer这个第三库音频播放库,Slider组件、redux。实现的思路其实是比较简单的,麻烦的是各种不同数据类型的转化和多个页面对播放控制可能会产生冲突的优化。
    • 整个播放进度以及歌曲列表都保存在redux中,因为在多个页面都有可能去改变播放的状态。
    • 首先需要在用户首次开始播放时,创建一个audioplayer的实例,然后可以在音频加载完之后获取到音源的长度,之后就可以通过监听audioplayer实例来获取到当前的播放进度。ranho然后通过音源的总长度和当前播放进度来得到播放的百分比,将这个百分比绑定到Slider组件上刷新页面,更新进度条。
    • 拖动Slider,可以在onchanged和onchangeend回调函数中拿到拖动的百分比,将百分比转化为当前音频的实际分钟数,然后调用audioplayer实例方法调整歌曲的播放进度。
    • 具体的代码可以在GitHub上查看。
  • Api:使用开源Node Service,GitHub地址:项目地址

最后

所有的项目代码都可以在Github上找到,有兴趣的同学可以star或fork项目,GitHub仓库地址:项目地址,一起交流。目前项目中还有不少问题,有时间的话我会进行修复和添加一些规划中的新功能。

推荐阅读