init
This commit is contained in:
40
xhs-mini-demos/component-case/voice/voice.css
Normal file
40
xhs-mini-demos/component-case/voice/voice.css
Normal file
@@ -0,0 +1,40 @@
|
||||
image {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
}
|
||||
|
||||
.page-body-wrapper {
|
||||
justify-content: space-between;
|
||||
flex-grow: 1;
|
||||
margin-bottom: 150px;
|
||||
}
|
||||
.page-body-time {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.time-big {
|
||||
font-size: 30px;
|
||||
margin: 10px;
|
||||
}
|
||||
.time-small {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.page-body-buttons {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.page-body-button {
|
||||
width: 225px;
|
||||
text-align: center;
|
||||
}
|
||||
.button-stop-record {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 10px solid #fff;
|
||||
background-color: #f55c23;
|
||||
border-radius: 115px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
158
xhs-mini-demos/component-case/voice/voice.js
Normal file
158
xhs-mini-demos/component-case/voice/voice.js
Normal file
@@ -0,0 +1,158 @@
|
||||
const util = require('../../util/util.js');
|
||||
|
||||
let playTimeInterval;
|
||||
let recordTimeInterval;
|
||||
const recorderManager = xhs.getRecorderManager();
|
||||
const innerAudioContext = xhs.createInnerAudioContext();
|
||||
Page({
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '录音',
|
||||
path: 'packageAPI/pages/voice/voice',
|
||||
};
|
||||
},
|
||||
data: {
|
||||
recording: false, // 录音中
|
||||
playing: false, // 播放中
|
||||
hasRecord: false, // 已经录音
|
||||
recordTime: 0, // 录音时长
|
||||
playTime: 0, // 播放时长
|
||||
formatedRecordTime: '00:00:00', // 录音时间
|
||||
formatedPlayTime: '00:00:00', // 播放时间
|
||||
},
|
||||
|
||||
onHide() {
|
||||
if (this.data.playing) {
|
||||
this.stopVoice();
|
||||
} else if (this.data.recording) {
|
||||
this.stopRecordUnexpectedly();
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
const that = this;
|
||||
// 监听录音开始事件
|
||||
recorderManager.onStart(() => {
|
||||
console.log('recorderManage: onStart');
|
||||
// 录音时长记录 每秒刷新
|
||||
recordTimeInterval = setInterval(() => {
|
||||
const recordTime = that.data.recordTime += 1;
|
||||
that.setData({
|
||||
formatedRecordTime: util.formatTime(that.data.recordTime),
|
||||
recordTime,
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
// 监听录音停止事件
|
||||
recorderManager.onStop(res => {
|
||||
console.log('recorderManage: onStop');
|
||||
that.setData({
|
||||
hasRecord: true, // 录音完毕
|
||||
recording: false,
|
||||
tempFilePath: res.tempFilePath,
|
||||
formatedPlayTime: util.formatTime(that.data.playTime),
|
||||
});
|
||||
// 清除录音计时器
|
||||
clearInterval(recordTimeInterval);
|
||||
});
|
||||
|
||||
// 监听播放开始事件
|
||||
innerAudioContext.onPlay(() => {
|
||||
console.log('innerAudioContext: onPlay');
|
||||
playTimeInterval = setInterval(() => {
|
||||
const playTime = that.data.playTime + 1;
|
||||
if (that.data.playTime === that.data.recordTime) {
|
||||
that.stopVoice();
|
||||
} else {
|
||||
console.log('update playTime', playTime);
|
||||
that.setData({
|
||||
formatedPlayTime: util.formatTime(playTime),
|
||||
playTime,
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
innerAudioContext.onStop(() => {
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
startRecord() {
|
||||
this.setData({
|
||||
recording: true, // 录音开始
|
||||
});
|
||||
// 设置 Recorder 参数
|
||||
const options = {
|
||||
duration: 10000, // 持续时长
|
||||
sampleRate: 44100,
|
||||
numberOfChannels: 1,
|
||||
encodeBitRate: 192000,
|
||||
format: 'aac',
|
||||
frameSize: 50,
|
||||
};
|
||||
recorderManager.start(options); // 开始录音
|
||||
},
|
||||
|
||||
stopRecord() {
|
||||
recorderManager.stop(); // 停止录音
|
||||
},
|
||||
|
||||
stopRecordUnexpectedly() {
|
||||
const that = this;
|
||||
xhs.stopRecord({
|
||||
success() {
|
||||
console.log('stop record success');
|
||||
clearInterval(recordTimeInterval);
|
||||
that.setData({
|
||||
recording: false,
|
||||
hasRecord: false,
|
||||
recordTime: 0,
|
||||
formatedRecordTime: util.formatTime(0),
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
playVoice() {
|
||||
innerAudioContext.src = this.data.tempFilePath;
|
||||
this.setData({
|
||||
playing: true,
|
||||
|
||||
}, () => {
|
||||
innerAudioContext.play();
|
||||
});
|
||||
},
|
||||
|
||||
pauseVoice() {
|
||||
clearInterval(playTimeInterval);
|
||||
innerAudioContext.pause();
|
||||
this.setData({
|
||||
playing: false,
|
||||
});
|
||||
},
|
||||
|
||||
stopVoice() {
|
||||
clearInterval(playTimeInterval);
|
||||
innerAudioContext.stop();
|
||||
this.setData({
|
||||
playing: false,
|
||||
formatedPlayTime: util.formatTime(0),
|
||||
playTime: 0,
|
||||
});
|
||||
},
|
||||
|
||||
clear() {
|
||||
clearInterval(playTimeInterval);
|
||||
innerAudioContext.stop();
|
||||
this.setData({
|
||||
playing: false,
|
||||
hasRecord: false,
|
||||
tempFilePath: '',
|
||||
formatedRecordTime: util.formatTime(0),
|
||||
recordTime: 0,
|
||||
playTime: 0,
|
||||
});
|
||||
},
|
||||
});
|
||||
3
xhs-mini-demos/component-case/voice/voice.json
Normal file
3
xhs-mini-demos/component-case/voice/voice.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "录音"
|
||||
}
|
||||
62
xhs-mini-demos/component-case/voice/voice.xhsml
Normal file
62
xhs-mini-demos/component-case/voice/voice.xhsml
Normal file
@@ -0,0 +1,62 @@
|
||||
<view class="container">
|
||||
<view class="page-body">
|
||||
<view class="page-section">
|
||||
<block xhs:if="{{recording === false && playing === false && hasRecord === false}}">
|
||||
<view class="page-body-time">
|
||||
<text class="time-big">{{formatedRecordTime}}</text>
|
||||
</view>
|
||||
<view class="page-body-buttons">
|
||||
<view class="page-body-button"></view>
|
||||
<view class="page-body-button" bindtap="startRecord">
|
||||
<image src="/image/record.png"></image>
|
||||
</view>
|
||||
<view class="page-body-button"></view>
|
||||
</view>
|
||||
</block>
|
||||
<block xhs:if="{{recording === true}}">
|
||||
<view class="page-body-time">
|
||||
<text class="time-big">{{formatedRecordTime}}</text>
|
||||
</view>
|
||||
<view class="page-body-buttons">
|
||||
<view class="page-body-button"></view>
|
||||
<view class="page-body-button" bindtap="stopRecord">
|
||||
<view class="button-stop-record"></view>
|
||||
</view>
|
||||
<view class="page-body-button"></view>
|
||||
</view>
|
||||
</block>
|
||||
<block xhs:if="{{hasRecord === true && playing === false}}">
|
||||
<view class="page-body-time">
|
||||
<text class="time-big">{{formatedPlayTime}}</text>
|
||||
<text class="time-small">{{formatedRecordTime}}</text>
|
||||
</view>
|
||||
<view class="page-body-buttons">
|
||||
<view class="page-body-button"></view>
|
||||
<view class="page-body-button" bindtap="playVoice">
|
||||
<image src="/image/play.png"></image>
|
||||
</view>
|
||||
<view class="page-body-button" bindtap="clear">
|
||||
<image src="/image/trash.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block xhs:if="{{hasRecord === true && playing === true}}">
|
||||
<view class="page-body-time">
|
||||
<text class="time-big">{{formatedPlayTime}}</text>
|
||||
<text class="time-small">{{formatedRecordTime}}</text>
|
||||
</view>
|
||||
<view class="page-body-buttons">
|
||||
<view class="page-body-button" bindtap="stopVoice">
|
||||
<image src="/image/stop.png"></image>
|
||||
</view>
|
||||
<view class="page-body-button" bindtap="pauseVoice">
|
||||
<image src="/image/pause.png"></image>
|
||||
</view>
|
||||
<view class="page-body-button" bindtap="clear">
|
||||
<image src="/image/trash.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user