找遍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组件或插件形式方便调用