uniapp 实现灌音上传

原谅我不帅

uniapp完成灌音上传功用

• html部门
  
• js部门
  
• 
  
  
  
  • 
    
    
    
    • 创立真例
      
       
    
  • 开端灌音
    
  • 完毕灌音
    
  • 播放灌音
    
  • 停息播放
    
  • 提交灌音到后端
    
  • 从头录造
    
  • onLoad部门
    
  • 计时器
    
  • 数据部门
    
  
  

html部门

我是写了个灌音的图片
面击以后弹出一个弹出层(仿了下qq的款式)

款式怎样写我便没有赘述了各人城市

js部门

那是重面敲乌板!!!

创立真例

为了齐局皆好获得到,能够随时开端灌音,随时避免灌音,我把他扔进齐局了

1.         const recorderManager = uni.getRecorderManager();//创立一个灌音真例
2.         const innerAudioContext = uni.createInnerAudioContext();//用去播放的真例
3.         // 为了避免苹果脚机静音没法播放
4.         uni.setInnerAudioOption({
5.                 obeyMuteSwitch: false
6.         })
7.         innerAudioContext.autoplay = true;
8.         export default {

复造代码

开端灌音

1. this.timecount = '00:00:00';//初初化灌音工夫
2. this.hour = 0;
3. this.minute = 0;
4. this.second = 0;
5. this.getTimeIntervalplus();//启拆的一个计时器,挪用开端计时
6. const options = {//参数
7.         duration: 600000,
8.         sampleRate: 44100,
9.         numberOfChannels: 1,
10.         encodeBitRate: 192000,
11.         format: 'mp3',
12.         frameSize: 50
13. }
14. recorderManager.start(options);

复造代码

完毕灌音

需求限定最短时少的能够做下判定,我那边出写

1. recorderManager.stop();//完毕灌音
2. clearInterval(this.timer);//完毕计时

复造代码

播放灌音

1. innerAudioContext.src = this.voicePath;//播放的地点(上里录的当地地点)
2. innerAudioContext.play();//播放

复造代码

停息播放

1. innerAudioContext.pause();//停息播放
2. clearInterval(this.timer);//肃清按时器

复造代码

提交灌音到后端

1. //完毕灌音提交灌音
2. submitrecord: function() {
3.         this.count += 1;//那是界说了一个齐局的变量去避免屡次提交
4.         if (this.count == 1){
5.                 console.log(this.count);
6.                 var https = getApp().globalData.https;
7.                 if (this.recordednum == 2) {
8.                 this.recordednum = 3;
9.                 recorderManager.stop();
10.                 clearInterval(this.timer);
11.         }
12.         if (this.voicePath != '') {
13.                 console.log(this.voicePath);
14.                 uni.uploadFile({
15.                         url: https + 'Uploads/uploadVoiceVideo',
16.                         filePath: this.voicePath,
17.                         name: 'file',
18.                         success: (res) => {
19.                         this.count = 0;
20.                         //初初化
21.                         this.initialize()//我启拆了一个初初化按时器的函数
22.                         this.timer = this.timecount;
23.                         this.show_recording = false;
24.                         var data = JSON.parse(res.data);
25.                         if (this.current == 0) {//判定是哪一个列内里录的音插归去
26.                                 this.firsvideo.push(data.address);
27.                                 } else if (this.current == 1) {
28.                                         this.secovideo.push(data.address);
29.                                         console.log(this.secovideo);
30.                                 } else if (this.current == 2) {
31.                                         this.thrivideo.push(data.address);
32.                                 }
33.                                 uni.showToast({
34.                                                 title: '提交胜利!',
35.                                                 icon: 'none',
36.                                                 duration: 1200
37.                                 })
38.                         },
39.                         fail: (err) => {
40.                                 uni.hideLoading();
41.                                 uni.showToast({
42.                                         tilte: '上传失利~',
43.                                         icon: 'none',
44.                                         duration: 1200
45.                                 })
46.                                         return
47.                                 }
48.                         });
49.                 } else {
50.                         console.log("灌音失利")
51.                         uni.showToast({
52.                                 tilte: '灌音失利',
53.                                 icon: 'none',
54.                                 duration: 1200
55.                         })
56.                         uni.hideLoading();
57.                         this.show_recording = false;
58.                         this.checkPermission()
59.                         this.rerecord()
60.                 }
61.         } else {
62.                 uni.showToast({
63.                         title: '请勿反复提交',
64.                         icon: 'none',
65.                         duration: 2000
66.                 })
67.         this.count=0;
68.         }
69. },

复造代码

从头录造

1. //从头录造
2.                         rerecord: function() {
3.                                 //初初化按时器
4.                                 this.initialize()
5.                                 this.getTimeIntervalplus();//开端计时
6.                                 const options = {
7.                                         duration: 600000,
8.                                         sampleRate: 44100,
9.                                         numberOfChannels: 1,
10.                                         encodeBitRate: 192000,
11.                                         format: 'mp3',
12.                                         frameSize: 50
13.                                 }
14.                                 recorderManager.start(options);//开端灌音
15.                         },

复造代码

onLoad部门

1. onLoad(option) {
2.                         var appointment_message = option.appointment_message;
3.                         appointment_message = JSON.parse(appointment_message);
4.                         this.appointment_message = appointment_message;
5.                         let that = this;
6.                         recorderManager.onStop(function(res) {
7.                                 console.log('recorder stop' + JSON.stringify(res));
8.                                 that.voiceDuration = res.duration;
9.                                 that.voicePath = res.tempFilePath;
10.                                 console.log(res);
11.                         });
12.                 },

复造代码

计时器

1. // 计时器删
2.                         getTimeIntervalplus() {
3.                                 clearInterval(this.timer);
4.                                 this.timer = setInterval(() => {
5.                                         this.second += 1;
6.                                         if (this.second >= 60) {
7.                                                 this.minute += 1;
8.                                                 this.second = 0;
9.                                         }
10.                                         if (this.minute >= 10) {
11.                                                 this.recordednum = 3;
12.                                                 recorderManager.stop();
13.                                                 clearInterval(this.timer);
14.                                         }
15.                                         this.second2 = this.second;
16.                                         this.minute2 = this.minute;
17.                                         this.timecount = this.showNum(this.hour) + ":" + this.showNum(this.minute) + ":" + this
18.                                                 .showNum(this.second);
20. - console.log("this.timecount", this.timecount)
22.                                 }, 1000);
23.                         },

复造代码

数据部门

1. data() {
2.                         return {
3.                                 action: 'https://yl.letter-song.top/api/Uploads/uploadPicture', //上传图片地点
4.                                 textareavalue: '', //笔墨形貌值
5.                                 fileList2: [], //返回图片途径2
6.                                 fileList3: [], //返回图片途径3
7.                                 fileList: [], //返回图片途径1
8.                                 firsvideo: [], //灌音途径1
9.                                 secovideo: [], //灌音途径2
10.                                 thrivideo: [], //灌音途径3
11.                                 appointment_message: '', //预定疑息上个页里传参过去的
12.                                 list: [{ //标签表
13.                                         name: '过往病症'
14.                                 }, {
15.                                         name: '远期病症'
16.                                 }, {
17.                                         name: '本次病症',
18.                                 }],
19.                                 current: 0, //选中项
20.                                 sty: { //滑块款式
21.                                         height: '4px',
22.                                         borderRadius: '2rpx',
23.                                         borderTopLeftRadius: '10px',
24.                                         backgroundColor: '#3ECEB5'
25.                                 },
26.                                 activeItem: { //选中项款式
27.                                         color: '#333333',
28.                                         fontWeight: '600',
29.                                         fontSize: '36rpx',
30.                                 },
31.                                 show_recording: false, //调起灌音弹窗
32.                                 recordednum: 1, //1:初初形态2.灌音形态3完毕
33.                                 voicePath: '', //本次音频灌音途径
34.                                 voiceDuration: '',
35.                                 timecount: '00:00:00',
36.                                 timecount2: "",
37.                                 hour: 0,
38.                                 minute: 0,
39.                                 second: 0,
40.                                 hour2: 0,
41.                                 minute2: 0,
42.                                 second2: 0,
43.                                 isZant: false,
44.                                 timer: '',
45.                                 yuming: '那是域名',
46.                                 permiss: 0, //0为开启灌音权限1已开启灌音权限,
47.                                 count: 0
48.                         }
49.                 },

复造代码

免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！