更新记录
1.0.9(2024-04-15)
android更换ijk内核
1.0.8(2023-11-03)
ios添加 wav flac格式播放
1.0.7(2023-09-17)
修复背景
查看更多平台兼容性
Android | Android CPU类型 | iOS |
---|---|---|
适用版本区间:4.4 - 12.0 | armeabi-v7a:支持,arm64-v8a:支持,x86:未测试 | 适用版本区间:9 - 16 |
原生插件通用使用流程:
- 购买插件,选择该插件绑定的项目。
- 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
- 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
- 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
- 开发完毕后正式云打包
付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios
注意事项:使用HBuilderX2.7.14以下版本,如果同一插件且同一appid下购买并绑定了多个包名,提交云打包界面提示包名绑定不一致时,需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择
# 音频播放器 播放音乐 有声小说,支持缓存 播放模式 控件自定义
概述
概述
1.android exoPlayer内核, ios ijk 内核
2.支持缓存
3.控件自定义
插件集成准备事项
一,ios编译需要勾选官方videoPlayer android 不用勾选 二,试用 勾选云端插件: 三,自定义基座: 四,选定基座运行:
五,ios app常用其他配置 - 后台运行能力 加 audio
温馨提示
监听事件
var globalEvent = weex.requireModule('globalEvent');
globalEvent.addEventListener("muCallback", function (e) {
var code= e.code;
//code事件
//播放状态 播放错误-1 正在播放0 暂停1 结束2 缓冲中3
//播放中返回 反冲进度 播放进度4 音频切换返回当前音频数据5
//自定义控件事件要与控件定义的code 保持一致 不能重复
});
模块接口
init
初始化
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
ox.init({
openCache: true,//是否开启缓存
playMode: 3, //1单曲循环2随机播放3列表循环4顺序播放
openNotification: true//是否显示状态栏通知
});
initMusicData
全屏界面
<oxMusicPlayer ref='player' :style='boxStyle'></oxMusicPlayer>
let player = this.$refs.player;
player.initMusicData(test_data);
show
全屏显示
let player = this.$refs.player;
player.show();
hide
全屏隐藏
let player = this.$refs.player;
player.hide();
sendDanmaku
全屏发送弹窗
let player = this.$refs.player;
var danmaku = {
uid: '',
avatar: 'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/bc281dfcaf750de7acd9c8e9224e237b.png',
name: '潮汕小丸子',
content: '弹幕'
};
player.sendDanmaku(danmaku);
showDanmaku
全屏显示弹窗
let player = this.$refs.player;
player.showDanmaku();
hideDanmaku
全屏隐藏弹窗
let player = this.$refs.player;
player.hideDanmaku();
addComponent
全屏动态添加自定义控件
//component 自定义控件 radius 圆角值 backgroundColor 背景色 border 边框 borderColor边框颜色
//alignment 文字对齐0:居中 1上左对齐 2上中对齐 3上右对齐 4上两端对齐 5下左对齐 6下中对齐 7下右对齐 8下两端对齐 9居中两端对齐
//textSize:14 文字大小 textColor:'#C0FF3E' 文字颜色 alpha 背景透明度
//hidden 是否隐藏
//code:16//控件标识 同时作为点击事件返回码 0-5占用 不能使用 组件 code值不能重复 rect 图片位置(相对父组件component位置)
//animation 隐藏 显示 动画起作用 0正常 1左 2右 3上 4下
//动态添加自定义控件 大窗口下起作用
let player = this.$refs.player;
//弹幕自定义控件点击事件
var tmBtn = {
type: 'component',
x: 50,
y: 320,
w: 30,
h: 30,
radius: 5,
backgroundColor: '#80000000',
alpha: 0.6,
border: 0,
borderColor: '#01000000',
code: 32,
hidden: false,
animation: 0,
pics: [{ path: '/static/tm_on.png', x: 0, y: 0, w: 30, h: 30, code: 321 }],
texts: []
}; //弹幕按钮
player.addComponent(tmBtn,result => {});
updateComponent
全屏动态更新自定义控件
//component 自定义控件 radius 圆角值 backgroundColor 背景色 border 边框 borderColor边框颜色
//alignment 文字对齐0:居中 1上左对齐 2上中对齐 3上右对齐 4上两端对齐 5下左对齐 6下中对齐 7下右对齐 8下两端对齐 9居中两端对齐
//textSize:14 文字大小 textColor:'#C0FF3E' 文字颜色 alpha 背景透明度
//hidden 是否隐藏
//code:16//控件标识 同时作为点击事件返回码 0-5占用 不能使用 组件 code值不能重复 rect 图片位置(相对父组件component位置)
//animation 隐藏 显示 动画起作用 0正常 1左 2右 3上 4下
//动态更新自定义控件 大窗口下起作用
let player = this.$refs.player;
//弹幕自定义控件点击事件
var tmBtn = {
type: 'component',
x: 50,
y: 320,
w: 30,
h: 30,
radius: 5,
backgroundColor: '#80000000',
alpha: 0.6,
border: 0,
borderColor: '#01000000',
code: 32,
hidden: false,
animation: 0,
pics: [{ path: '/static/tm_on.png', x: 0, y: 0, w: 30, h: 30, code: 321 }],
texts: []
}; //弹幕按钮
player.updateComponent(tmBtn,result => {});
openSmallView
打开小窗
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
ox.openSmallView({
rect: { x: 0, y: 450, w: w, h: 60 },
components: components,
backgroundColor: '#607D8B',
currentIndex: 0,
radius: 15,
data: data
});
hideSmallView
隐藏小窗
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
ox.hideSmallView();
showSmallView
显示小窗
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
ox.showSmallView();
openWithoutView
打开无界面播放
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
ox.openWithoutView({
currentIndex: 0,
data: data
});
stop
全部停止
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
ox.stop();
pause
暂停
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
ox.pause();
resume
恢复播放
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
ox.resume();
next
下一首
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
ox.next();
pre
上一首
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
ox.pre();
forward
前进15秒
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
ox.forward({ ms: 15000 });
backup
倒退15秒
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
ox.backup({ ms: 15000 });
seekTo
移动位置播放
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
ox.seekTo({ ms: 15000 });
setPlayMode
设定播放模式1单曲循环2随机播放3列表循环4顺序播放
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
ox.setPlayMode({ playMode: 3 });
getPlayMode
获取当前播放模式1单曲循环2随机播放3列表循环4顺序播放
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
ox.getPlayMode(result => {
var playMode = result.playMode;
});
playIndex
指定索引播放
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
ox.playIndex({ index: 0 });
getCurrentInfo
获取当前音频信息
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
ox.getCurrentInfo(result => {
var data = result.data;
});
addDatasBefore
最前面追加数据
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
ox.addDatasBefore({
data: [{
"id": 1,
"title": "在那之后",
"artist": "缪礼丞 / Mikey-18 / Tiko",
"albumName": "--",
"pic": "http://p2.music.126.net/ZuJ6QoksVgpSzNzUxjk5XA==/109951168002270456.jpg",
"music_url": "http://music.163.com/song/media/outer/url?id=1992695240.mp3",
"description": "如果说当时分开是巧合..."
}]
}, result => {
var code = result.code;
});
addDatasAfter
追加数据
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
ox.addDatasAfter({
data: [{
"id": 1,
"title": "在那之后",
"artist": "缪礼丞 / Mikey-18 / Tiko",
"albumName": "--",
"pic": "http://p2.music.126.net/ZuJ6QoksVgpSzNzUxjk5XA==/109951168002270456.jpg",
"music_url": "http://music.163.com/song/media/outer/url?id=1992695240.mp3",
"description": "如果说当时分开是巧合..."
}]
}, result => {
var code = result.code;
});
updateDatas
更新全部数据
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
ox.updateDatas({
data: [{
"id": 1,
"title": "在那之后",
"artist": "缪礼丞 / Mikey-18 / Tiko",
"albumName": "--",
"pic": "http://p2.music.126.net/ZuJ6QoksVgpSzNzUxjk5XA==/109951168002270456.jpg",
"music_url": "http://music.163.com/song/media/outer/url?id=1992695240.mp3",
"description": "如果说当时分开是巧合..."
}]
}, result => {
var code = result.code;
});
insertData
插入一条记录
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
ox.insertData({
data: {
"id": 1,
"title": "在那之后",
"artist": "缪礼丞 / Mikey-18 / Tiko",
"albumName": "--",
"pic": "http://p2.music.126.net/ZuJ6QoksVgpSzNzUxjk5XA==/109951168002270456.jpg",
"music_url": "http://music.163.com/song/media/outer/url?id=1992695240.mp3",
"description": "如果说当时分开是巧合..."
},
index: 2
}, result => {
var code = result.code;
});
deleteData
删除一条记录
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
ox.deleteData({
index: 2
}, result => {
var code = result.code;
});
addComponent
动态添加自定义控件 小窗口下起作用
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
var tmBtn = {
type: 'component',
x: 50,
y: 320,
w: 30,
h: 30,
radius: 5,
backgroundColor: '#80000000',
alpha: 0.6,
border: 0,
borderColor: '#01000000',
code: 32,
hidden: false,
animation: 0,
pics: [{ path: '/static/tm_on.png', x: 0, y: 0, w: 30, h: 30, code: 321 }],
texts: []
}; //弹幕按钮
ox.addComponent(tmBtn,result => {});
updateComponent
更新自定义控件 小窗口下起作用
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
var tmBtn = {
type: 'component',
x: 50,
y: 320,
w: 30,
h: 30,
radius: 5,
backgroundColor: '#80000000',
alpha: 0.6,
border: 0,
borderColor: '#01000000',
code: 32,
hidden: false,
animation: 0,
pics: [{ path: '/static/tm_on.png', x: 0, y: 0, w: 30, h: 30, code: 321 }],
texts: []
}; //弹幕按钮
ox.updateComponent(tmBtn,result => {});
clearCache
清理缓存
const ox = uni.requireNativePlugin('Jiang-OxMusicPlayer');
ox.clearCache();