Browse Source

1. 录音功能优化 2. 防止多个音频同时播放

main
kola-web 3 months ago
parent
commit
5cb97bcec2
  1. 5
      src/app.ts
  2. 6
      src/components/customAudioBar/index.ts
  3. 3
      src/components/customRecord/index.json
  4. 55
      src/components/customRecord/index.scss
  5. 41
      src/components/customRecord/index.ts
  6. 17
      src/components/customRecord/index.wxml
  7. 10
      src/module1/pages/casesFeedback/index.scss
  8. 10
      src/module1/pages/chatRoom/index.scss
  9. 7
      src/module1/pages/chatRoom/index.ts
  10. 4
      src/module1/pages/userInfo/index.wxml
  11. 4
      src/pages/cases/index.ts

5
src/app.ts

@ -58,6 +58,11 @@ App<IAppOption>({
}); });
}, },
}); });
wx.setInnerAudioOption({
obeyMuteSwitch: false,
mixWithOther: false,
});
}, },
onShow(options) { onShow(options) {
if (options.query.scene) { if (options.query.scene) {

6
src/components/customAudioBar/index.ts

@ -28,7 +28,6 @@ Component({
lifetimes: { lifetimes: {
attached() { attached() {
const innerAudioContext = wx.createInnerAudioContext(); const innerAudioContext = wx.createInnerAudioContext();
innerAudioContext.obeyMuteSwitch = false;
this.setData({ this.setData({
innerAudioContext, innerAudioContext,
}); });
@ -63,6 +62,11 @@ Component({
play: false, play: false,
}); });
}); });
innerAudioContext.onStop(() => {
this.setData({
play: false,
});
});
} }
}, },
handlePause() { handlePause() {

3
src/components/customRecord/index.json

@ -1,6 +1,7 @@
{ {
"component": true, "component": true,
"usingComponents": { "usingComponents": {
"van-popup": "@vant/weapp/popup/index" "van-popup": "@vant/weapp/popup/index",
"customAudioBar":"/components/customAudioBar/index"
} }
} }

55
src/components/customRecord/index.scss

@ -79,35 +79,68 @@
top: 0; top: 0;
opacity: 1; opacity: 1;
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
}
&.record-ani {
.record-page-icon { .record-page-icon {
width: 200rpx; width: 200rpx;
height: 200rpx; height: 200rpx;
padding: 56rpx; padding: 56rpx;
// border: 28rpx solid rgba(255, 255, 255, 0.25);
border-radius: 50%; border-radius: 50%;
animation: grow-bp 0.6s ease-in-out infinite; animation: grow-bp 0.6s ease-in-out infinite;
@keyframes grow-bp { @keyframes grow-bp {
0% { 0% {
padding: 0; padding: 0;
// border-width: 0;
} }
// 25% {
// padding: 28rpx;
// }
50% { 50% {
padding: 56rpx; padding: 56rpx;
// border-width: 28rpx;
} }
// 75% {
// padding: 28rpx;
// border-width: 0;
// }
100% { 100% {
padding: 0; padding: 0;
// border-width: 0;
} }
} }
} }
} }
.dialog {
padding: 66rpx 40rpx 44rpx;
border-radius: 32rpx;
width: 630rpx;
box-sizing: border-box;
background: linear-gradient(180deg, #e8fdff 0%, #f6f6f6 100%);
.audio-bar {
border-radius: 90rpx;
background-color: #fff;
}
.d-footer {
margin-top: 32rpx;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18rpx;
.cancel {
width: 266rpx;
height: 84rpx;
font-size: 32rpx;
color: #333333;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border-radius: 94rpx 94rpx 94rpx 94rpx;
border: 1px solid #d5d5d5;
}
.conform {
width: 266rpx;
height: 88rpx;
font-size: 32rpx;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(90deg, #00b4c5 0%, #54e2b4 100%);
border-radius: 94rpx 94rpx 94rpx 94rpx;
}
}
}
} }
} }

41
src/components/customRecord/index.ts

@ -17,8 +17,11 @@ Component({
* *
*/ */
data: { data: {
record: false,
startShow: false, startShow: false,
show: false, show: false,
audioObj: {} as any,
recorderManager: null as null | WechatMiniprogram.RecorderManager, recorderManager: null as null | WechatMiniprogram.RecorderManager,
time: 0, time: 0,
}, },
@ -47,6 +50,7 @@ Component({
const { recorderManager } = this.data; const { recorderManager } = this.data;
this.setData({ this.setData({
show: true, show: true,
record: true,
}); });
if (this.data.startShow) { if (this.data.startShow) {
recorderManager?.start({ recorderManager?.start({
@ -61,8 +65,8 @@ Component({
recorderManager?.stop(); recorderManager?.stop();
} }
this.setData({ this.setData({
startShow: false, // startShow: false,
show: false, // show: false,
}); });
}, },
recorderManagerListen(recorderManager: WechatMiniprogram.RecorderManager) { recorderManagerListen(recorderManager: WechatMiniprogram.RecorderManager) {
@ -79,17 +83,39 @@ Component({
title: "录音时间太短", title: "录音时间太短",
icon: "none", icon: "none",
}); });
this.setData({
startShow: false,
show: false,
});
return; return;
} }
this.setData({
record: false,
audioObj: {
...res,
duration: Number.parseInt(String(res.duration / 1000)),
},
});
});
},
handleCancel() {
this.setData({
startShow: false,
show: false,
record: false,
});
},
handleConform() {
const { audioObj } = this.data;
this.handleCancel();
this.uploadFile({ this.uploadFile({
fileType: "audio", fileType: "audio",
tempFilePath: res.tempFilePath, tempFilePath: audioObj.tempFilePath,
size: res.fileSize, size: audioObj.fileSize,
duration: res.duration, duration: audioObj.duration,
}).then((res) => { }).then((res) => {
this.triggerEvent("file", res as object); this.triggerEvent("file", res as object);
}); });
});
}, },
checkRecordPermission(callback: () => void) { checkRecordPermission(callback: () => void) {
wx.getSetting({ wx.getSetting({
@ -185,7 +211,7 @@ Component({
expandJson.imgUrl = data.data.SnapshotUrl; expandJson.imgUrl = data.data.SnapshotUrl;
} }
if (item.fileType === "audio") { if (item.fileType === "audio") {
expandJson.duration = Number.parseInt(String(item.duration / 1000)); expandJson.duration = item.duration;
} }
resolve(expandJson); resolve(expandJson);
}, },
@ -204,6 +230,7 @@ Component({
const arr2 = lastString.split("."); // 再以"."作为分隔符 const arr2 = lastString.split("."); // 再以"."作为分隔符
return arr2[arr2.length - 1]; //将后缀名返回出来 return arr2[arr2.length - 1]; //将后缀名返回出来
}, },
noneEnoughPeople() {},
}, },
}); });

17
src/components/customRecord/index.wxml

@ -5,9 +5,14 @@
bind:touchend="handleHide" bind:touchend="handleHide"
bind:touchcancel="handleHide" bind:touchcancel="handleHide"
> >
<!-- catchtouchmove="noneEnoughPeople" -->
<slot wx:if="{{slotIcon}}"></slot> <slot wx:if="{{slotIcon}}"></slot>
<image wx:else class="icon" src="{{imageUrl}}record.png?t={{Timestamp}}"></image> <image wx:else class="icon" src="{{imageUrl}}record.png?t={{Timestamp}}"></image>
<view wx:if="{{startShow}}" class="record-page {{startShow && 'record-pape-start'}} {{show && 'record-page-active'}}"> <view
wx:if="{{startShow}}"
class="record-page {{startShow && 'record-pape-start'}} {{show && 'record-page-active'}} {{ record && 'record-ani'}}"
>
<block wx:if="{{record}}">
<view class="record-line"> <view class="record-line">
<image class="wave" src="{{imageUrl}}wave-white.gif?t={{Timestamp}}"></image> <image class="wave" src="{{imageUrl}}wave-white.gif?t={{Timestamp}}"></image>
<view class="time">{{time}}”</view> <view class="time">{{time}}”</view>
@ -15,5 +20,15 @@
<view class="record-page-icon-wrap"> <view class="record-page-icon-wrap">
<image class="record-page-icon" src="{{imageUrl}}record.png?t={{Timestamp}}" mode="scaleToFill"></image> <image class="record-page-icon" src="{{imageUrl}}record.png?t={{Timestamp}}" mode="scaleToFill"></image>
</view> </view>
</block>
<view class="dialog" wx:else>
<view class="audio-bar">
<customAudioBar url="{{audioObj.tempFilePath}}" time="{{audioObj.duration}}"></customAudioBar>
</view>
<view class="d-footer">
<view class="cancel" bind:tap="handleCancel">取消</view>
<view class="conform" bind:tap="handleConform">确定</view>
</view>
</view>
</view> </view>
</view> </view>

10
src/module1/pages/casesFeedback/index.scss

@ -212,11 +212,11 @@ page {
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 13em; max-width: 13em;
} }
.preview{ .preview {
font-size: 32rpx; font-size: 32rpx;
color: #01B4C5; color: #01b4c5;
} }
.del{ .del {
position: absolute; position: absolute;
top: -16rpx; top: -16rpx;
right: -16rpx; right: -16rpx;
@ -485,7 +485,7 @@ page {
} }
.btn1 { .btn1 {
margin-top: 24rpx; margin-top: 24rpx;
padding: 14rpx; padding: 22rpx;
font-size: 32rpx; font-size: 32rpx;
color: #fff; color: #fff;
line-height: 44rpx; line-height: 44rpx;
@ -495,7 +495,7 @@ page {
} }
.btn2 { .btn2 {
margin-top: 24rpx; margin-top: 24rpx;
padding: 12rpx 14rpx; padding: 20rpx 14rpx;
font-size: 32rpx; font-size: 32rpx;
color: rgba(1, 180, 197, 1); color: rgba(1, 180, 197, 1);
line-height: 44rpx; line-height: 44rpx;

10
src/module1/pages/chatRoom/index.scss

@ -307,12 +307,12 @@ page {
.header { .header {
padding: 32rpx; padding: 32rpx;
display: flex; display: flex;
gap: 12rpx; gap: 16rpx;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.icon { .icon {
width: 48rpx; width: 52rpx;
height: 48rpx; height: 52rpx;
} }
.place { .place {
padding: 16rpx 32rpx; padding: 16rpx 32rpx;
@ -350,8 +350,8 @@ page {
} }
.icon-add { .icon-add {
width: 48rpx; width: 52rpx;
height: 48rpx; height: 52rpx;
} }
} }
.fold-container { .fold-container {

7
src/module1/pages/chatRoom/index.ts

@ -62,7 +62,6 @@ Page({
this.innerAudioContext = wx.createInnerAudioContext({ this.innerAudioContext = wx.createInnerAudioContext({
useWebAudioImplement: true, useWebAudioImplement: true,
}); });
this.innerAudioContext.obeyMuteSwitch = false
app.waitLogin().then(() => { app.waitLogin().then(() => {
this.getAgree(); this.getAgree();
@ -437,6 +436,12 @@ Page({
messageList, messageList,
}); });
}); });
this.innerAudioContext.onStop(()=>{
messageItem.isPlay = false;
this.setData({
messageList,
});
})
this.setData({ this.setData({
messageList, messageList,
}); });

4
src/module1/pages/userInfo/index.wxml

@ -18,7 +18,7 @@
<view class="label">医院</view> <view class="label">医院</view>
<view class="content">{{userInfo.HospitalName}}</view> <view class="content">{{userInfo.HospitalName}}</view>
</view> </view>
<view class="row"> <view class="row" wx:if="{{userInfo.DoctorLevel>1}}">
<view class="label">科室</view> <view class="label">科室</view>
<view class="picker" bind:tap="handleShowDept"> <view class="picker" bind:tap="handleShowDept">
<view class="picker-content"> <view class="picker-content">
@ -27,7 +27,7 @@
</view> </view>
</view> </view>
</view> </view>
<view class="row"> <view class="row" wx:if="{{userInfo.DoctorLevel>1}}">
<view class="label">专长</view> <view class="label">专长</view>
<view class="content" bind:tap="handleShowDept"> <view class="content" bind:tap="handleShowDept">
<view class="all">{{SpecialtyName || '无'}}</view> <view class="all">{{SpecialtyName || '无'}}</view>

4
src/pages/cases/index.ts

@ -485,8 +485,8 @@ Page({
handleQuestion(e) { handleQuestion(e) {
const { index } = e.currentTarget.dataset; const { index } = e.currentTarget.dataset;
const message = { const message = {
1: "设为公开的病历,病历所在科室医生均可访问", 1: "设为公开的病历,公开病历平台所有医生均可访问",
2: "标为优质的病历,优质病历平台所有医生均可访问", 2: "标为优质的病历,病历所在科室医生均可访问",
3: "属于您所在科室的所有病历", 3: "属于您所在科室的所有病历",
}[index]; }[index];
wx.showModal({ wx.showModal({

Loading…
Cancel
Save