data() {
return {
innerAudioContext: null, //音频实例对象
windowHeight: 0, //可用窗口高
scrollTop: 1, //滚动 初始值
scrollHeight: 0, //滚动内容总高度
reHeight: 0, //可滚动高度
isGetReHeight: false, // 是否已经计算出可用高度
percentPlayed: 0, //当前时间/总时间;得到的百分比
};
},
methods: {
getwindowHeight() {
let obj = uni.getWindowInfo();
this.windowHeight = obj.windowHeight;
console.log("this.windowHeight=>", this.windowHeight);
},
scroll(event) {
console.log("监视滚动", event);
this.scrollHeight = event.detail.scrollHeight;
this.reHeight =
this.scrollHeight - parseInt(0.5 * Number(this.windowHeight));
console.log("可滚动高度=>", this.reHeight);
this.isGetReHeight = true;
},
innerAudioContextAction() {
// 设置音频实例与相关设置
this.innerAudioContext = uni.createInnerAudioContext();
console.log("innerAudioContext=>", this.innerAudioContext);
console.log("??????", this.voiceArr[this.curIndex]);
this.innerAudioContext.autoplay = true; //设置是否自动播放
this.innerAudioContext.src = this.voiceArr[this.curIndex];
this.pageTitle = this.titleArr[this.curIndex].title;
console.log("src", this.innerAudioContext.src);
this.innerAudioContext.play(); //播放
this.innerAudioContext.onCanplay((re) => {
console.log("onCanplay", re);
});
this.innerAudioContext.onTimeUpdate(() => {
let currentTime = this.innerAudioContext.currentTime;
let innerAudioContext = this.innerAudioContext.duration;
console.log("音频播放进度更新事件", currentTime, innerAudioContext);
this.percentPlayed =
Number(this.innerAudioContext.currentTime) /
Number(this.innerAudioContext.duration);
console.log("结果=>", this.percentPlayed.toFixed(4));
this.scrollTop = Number(this.reHeight * this.percentPlayed);
console.log(
"this.scrollTop=>",
this.scrollTop,
"this.reHeight=>",
this.reHeight
);
});
this.innerAudioContext.onError(function (res) {
console.log(res);
});
this.innerAudioContext.onEnded(() => {
this.innerAudioContext.stop();
if (this.curIndex == this.voiceArr.length - 1) {
console.log("放完了");
console.log("this.curIndex=>", this.curIndex);
this.innerAudioContext.stop();
}
if (this.curIndex != this.voiceArr.length - 1) {
console.log("改前this.curIndex=>", this.curIndex);
this.curIndex++;
console.log("改后this.curIndex=>", this.curIndex);
this.pageTitle = this.titleArr[this.curIndex].title;
this.innerAudioContext.src = this.voiceArr[this.curIndex];
console.log("再次修改后src", this.innerAudioContext.src);
this.innerAudioContext.autoplay = true; //设置是否自动播放
this.innerAudioContext.play();
}
});
},
uniapp 通过scroll-view实现音频的文字内容超出显示区,滚动条自动根据音频时间百分比滑动。
最新推荐文章于 2024-05-31 15:47:35 发布