{{tools.getAudioCurrent(currentTime)}}
点击选择音频文件上传
{{tools.getAudioTotal(duration)}}
var countWidth = 300; //播放条总宽度
var slideLeft = 0; //当前位置,点击的位置
var duration = 0; //总时长
var currentTime = 0;//当前时长
var progressCurrent = 0;
var _parsetAudioTime = function (ns) {
ns = parseInt(ns);
var i = parseInt(ns / 60);
var s = ns % 60;
return _minute(i) + ":" + _minute(s);
}
var _getProgress = function () {
if (currentTime == 0 || duration == 0) return 0;
var progress = parseInt(currentTime / duration * 100);
return progress;
}
var _minute = function (ns) {
if (ns < 10) {
ns = "0" + ns;
}
return ns;
}
var changeCurrentTime = function (newValue, oldValue, ownerInstance, instance) {
var sliderNode = ownerInstance.selectComponent(".audio-play_progress-slider");
var currentNode = ownerInstance.selectComponent(".audio-play_progress-current");
var left = _getProgress();
if(left == progressCurrent) return;
progressCurrent = left;
sliderNode.setStyle({
"left": (left - 1) + "%"
})
currentNode.setStyle({
"width": left + "%"
})
}
var getAudioCurrent = function (ns) {
currentTime = ns;
return _parsetAudioTime(ns);
}
var getAudioTotal = function (ns) {
console.log("getAudioTotal", ns)
duration = ns;
return _parsetAudioTime(ns);
}
var touchStart = function (event, ins) {
ins.callMethod("startDrag");
var totalNode = ins.selectComponent(".audio-play_progress-total");
var sliderNode = ins.selectComponent(".audio-play_progress-slider");
var currentNode = ins.selectComponent(".audio-play_progress-current");
var totalClientRect = totalNode.getBoundingClientRect();
var slideClientRect = sliderNode.getBoundingClientRect();
countWidth = totalClientRect.width;
// 获取事件触发点的坐标数据
var touch = event.touches[0] || event.changedTouches[0]
//存储坐标数据，后期使用
var moveE = ins.getState();
moveE.startX = touch.pageX;
moveE.startY = touch.pageY;
slideLeft = parseInt(touch.pageX - totalClientRect.left);
console.log(touch.pageX-totalClientRect.left)
var left = parseInt((touch.pageX-totalClientRect.left) / countWidth * 100);
sliderNode.setStyle({
"left": (left - 1) + "%"
})
currentNode.setStyle({
"width": left + "%"
})
console.log('inss', ins.setStyle)
}
var touchmove = function (event, ins) {
//组件实例
var sliderNode = ins.selectComponent(".audio-play_progress-slider");
var currentNode = ins.selectComponent(".audio-play_progress-current");
console.log(JSON.stringify(sliderNode.getBoundingClientRect()))
// 获取拖动点的坐标数据
var touch = event.touches[0] || event.changedTouches[0]
//拿出拖动开始时存储的数据
var moveE = ins.getState();
//计算拖动点与拖动开始时的触发点之间的横坐标之差
var gap = touch.pageX - moveE.startX + slideLeft;
var left = parseInt(gap / countWidth * 100);
left = left >= 100 ? 100 : left;
left = left <= 0 ? 0 : left;
sliderNode.setStyle({
"left": (left - 1) + "%"
})
currentNode.setStyle({
"width": left + "%"
})
}
var touchEnd = function (event, ins) {
var currentNode = ins.selectComponent(".audio-play_progress-current");
var width = currentNode.getBoundingClientRect().width;
var limit = (width / countWidth) * duration;
console.log("limit", limit, width)
ins.callMethod("endDrag", limit);
}
module.exports = {
getAudioTotal: getAudioTotal,
changeCurrentTime: changeCurrentTime,
getAudioCurrent: getAudioCurrent,
touchStart: touchStart,
touchmove: touchmove,
touchEnd: touchEnd
}