weex开发后台音乐播放功能

找遍weex及相应第三方框架，没发现有支持音乐播放的组件标签，则自己动手实现这一功能

效果如图(具体代码及样式在这里不提供)

条件:

    1.使用基于weex的第三方框架eros

    2.会module扩展开发

    3.有java及android开发基础

正文开始:

一.开发service

public class MusicService extends Service {

    public final IBinder binder = new MyBinder();
    public class MyBinder extends Binder{
       public MusicService getService() {
            return MusicService.this;
        }
    }
    public static MediaPlayer mp = new MediaPlayer();
    public MusicService() {

    }

    public void setVideoUrl(Context context, String videoUrl){
        try {
            YhTools.Log(videoUrl);
            mp.reset();
            Uri uri = Uri.parse(videoUrl);
            mp.setDataSource(context,uri);
            mp.prepare();
        } catch (Exception e) {
            YhTools.Log("can't get to the song");
            e.printStackTrace();
        }
    }

    public void start() {
        mp.start();
    }
    public boolean isPlaying() {
        return mp.isPlaying();
    }
    public void playOrPause() {
        if(mp.isPlaying()){
            mp.pause();
        } else {
            mp.start();
        }
    }
    public void stop() {
        if(mp != null) {
            mp.stop();
            try {
                mp.prepare();
                mp.seekTo(0);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    @Override
    public void onDestroy() {
        mp.stop();
        mp.release();
        super.onDestroy();
    }

    /**
     * onBind 是 Service 的虚方法，因此我们不得不实现它。
     * 返回 null，表示客服端不能建立到此服务的连接。
     */
    @Override
    public IBinder onBind(Intent intent) {
        return binder;
    }
}

二.在Application中添加全局静态变量

public class App extends BMWXApplication {

private static Context appContext;

private static MusicService musicService = null;
private static LessonInfo lessonInfo = null;

.....此省略非重要代码

@Override
public void onCreate() {
    super.onCreate();
    try {
        WXSDKEngine.registerModule("MusicModule", MusicModule.class);
    } catch (WXException e) {
        e.printStackTrace();
    }

.....此省略非重要代码

appContext = getApplicationContext();

}

.....此省略非重要代码

public static Context getContext() {
    return appContext;
}

public static void setMusicService(MusicService service){
    musicService = service;
}
public static MusicService getMusicService(){
    return musicService;
}

public static void setLessonInfo(LessonInfo lesson){
    lessonInfo = lesson;
}

public static LessonInfo getLessonInfo(){
    return lessonInfo;
}

}

三.module模块开发

public class MusicModule extends WXModule {

    private ServiceConnection sc = new ServiceConnection() {
        @Override
        public void onServiceConnected(ComponentName componentName, IBinder iBinder) {
            App.setMusicService(((MusicService.MyBinder)iBinder).getService());
        }

        @Override
        public void onServiceDisconnected(ComponentName componentName) {
            App.setMusicService(null);
        }
    };

    private void bindServiceConnection() {
        Intent intent = new Intent(mWXSDKInstance.getContext(), MusicService.class);
        App.getContext().startService(intent);
        App.getContext().bindService(intent, sc, Activity.BIND_AUTO_CREATE);
    }

    public void initService(){
        if(App.getMusicService() == null){
            YhTools.Log("ready to new MusicService");
            App.setMusicService(new MusicService());
            YhTools.Log("finish to new MusicService");
            bindServiceConnection();
        }
    }
    /**
     * 开始播放,默认播放路径，并保存播放信息，为后面切换回播放页面时判断是否是当前正在播放的 
     * @param
     */
    @JSMethod(uiThread = true)
    public void play(Map data) {
        if (data != null && data.size() > 0){
            String videoUrl = data.get("videourl").toString();
            int id = Integer.valueOf(data.get("id").toString());
            int sectionid = Integer.valueOf(data.get("sectionid").toString());

            if (!TextUtils.isEmpty(videoUrl)){
                initService();
                App.getMusicService().setVideoUrl( App.getContext(),videoUrl);
                App.getMusicService().start();

                LessonInfo lessonInfo = new LessonInfo();
                lessonInfo.setId(id);
                lessonInfo.setSectionid(sectionid);
                lessonInfo.setVideoUrl(videoUrl);
                App.setLessonInfo(lessonInfo);
            }
        }

    }

    /**
     * 开始/暂停播放
     * @param
     */
    @JSMethod(uiThread = true)
    public void playOrPause() {
        App.getMusicService().playOrPause();
    }

    /**
     * 停止播放
     * @param
     */
    @JSMethod(uiThread = true)
    public void stop() {
        App.getMusicService().stop();
    }

/**
 * 判断是否正在播放，及最新播放的课程信息
 * @param callback
 */
@JSMethod (uiThread = false)
public void checkLesson(JSCallback callback){
    boolean isPlaying = false;
    if(App.getMusicService() != null){
        isPlaying = App.getMusicService().isPlaying();
    }

    Map<String, Object> map = new HashMap<>();
    map.put("isPlaying", isPlaying);
    map.put("lessonInfo", App.getLessonInfo());
    callback.invokeAndKeepAlive(map);
}

}

四.AndroidManifest.xml添加service

<service android:name=".service.MusicService" android:exported="true"></service>

五.weex前端核心代码

1.播放功能

startLearn(){
    var lessonInfo = {
        id:this.id,
        sectionid:this.sectionid,
        videourl:this.videourl
    }
    this.playing = true;
    weex.requireModule('MusicModule').play(lessonInfo);
},

2.暂停与开始

weex.requireModule('MusicModule').playOrPause();

当从其他页面跳转播放页面，页面加载完成时调用

checkIsPlaying(){
    var _this = this;
    weex.requireModule('MusicModule').checkLesson(function (ret) {
        if(!ret.isPlaying){
            _this.startLearn();
        }else{

            if(typeof(ret.lessonInfo) != "undefined"){
                //如果正在播放的与现在的不是同一课程，则切换到现在这个
                if(ret.lessonInfo.id!=_this.id){
                    _this.startLearn();
                }else{
                    ...这里查找正在播放的章节信息  
                }
                _this.playing = true;
            }

        }
    });
},

4.实现上一章节或下一章节,章节切换，设置sectionid,和vidourl,并调用startLearn方法即可

待完成功能

1.播放时间及进度条

2.封装为component组件或插件形式方便调用