• 技术文章 >web前端 >uni-app

    uniapp如何实现录音功能

    coldplay.xixicoldplay.xixi2021-01-13 18:59:20原创224

    uniapp实现录音功能的方法:使用函数【uni.getRecorderManager()】实现,代码为【methods: {startRecord() {console.log('开始录音');this.recorderManager】。

    本教程操作环境:windows7系统、uni-app2.5.1版本,Dell G3电脑。

    推荐(免费):uni-app开发教程

    uniapp实现录音功能的方法:

    这里就需要用到uni.getRecorderManager()

    export default {
    data: {
    recorderManager: {},
    innerAudioContext: {},
    },
    onLoad(options) {
    this.recorderManager = uni.getRecorderManager();
    this.innerAudioContext = uni.createInnerAudioContext();
    // 为了防止苹果手机静音无法播放
    uni.setInnerAudioOption({  
    obeyMuteSwitch: false  
    })
    this.innerAudioContext.autoplay = true;
    console.log("uni.getRecorderManager()",uni.getRecorderManager())
    let self = this;
    this.recorderManager.onStop(function (res) {
    console.log('recorder stop' + JSON.stringify(res));
    self.voicePath = res.tempFilePath;
    });
    },
    methods: {
    startRecord() {
    console.log('开始录音');
    this.recorderManager.start();
    },
    endRecord() {
    console.log('录音结束');
    this.recorderManager.stop();
    },
    playVoice() {
    console.log('播放录音');
    console.log('this.voicePath',this.voicePath);
     
    if (this.voicePath) {
    this.innerAudioContext.src = this.voicePath;
    this.innerAudioContext.play();
    }
    },
    }
    }

    这一段是苹果手机静音时无法播放

    uni.setInnerAudioOption({  
    obeyMuteSwitch: false  
    })

    这里录音展示是使用了插件luno-audio

    需要引入import luchAudio from '@/components/luch-audio/luch-audio.vue'、注册(在components内注册即可)并使用

    <view class="audioPlay">
    <button @tap="startRecord">开始录音</button>
    <button @tap="endRecord">停止录音</button> 
    <button @tap="playVoice">播放录音</button>
    </view>
    <luch-audio 
    v-if="audioContent"
    :src="audioContent" 
    :play.sync="audioPlayNew"
    ></luch-audio>

    添加后运行即可。

    相关免费学习推荐:编程视频

    以上就是uniapp如何实现录音功能的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:uniapp 录音功能
    上一篇:uniapp如何判断当前环境 下一篇:uniapp中如何使用iconfont
    第14期线上培训班

    相关文章推荐

    • h5做出网页录音功能• 微信小程序开发录音功能• 如何利用js实现录音上传功能• recorder.js 基于 HTML5 实现录音功能

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网