vue项目手机录音

手机实现录音功能,安卓和苹果都可。功能,点击开始录制录音后,随时可以停止录音,如果不点击停止最多录制15秒。


页面结构

html 复制代码
<!--音频-->
<div class="audio-box">
    <audio id="audioPlayer"
           controls
           controlslist="noplaybackrate nodownload"
           preload="auto"></audio>
    <i @click="deleteAudio" class="el-icon-delete"></i>
</div>

<!--录制按钮-->
<div class="out-ring">
	<!--未录制状态-->
    <div @click="startRecording" v-show="!isRecording" class="in-ring">
        <img src="@/assets/img/audio.png" alt="" style="height:48px;">
    </div>
    <!--录制中-->
    <div v-show="isRecording" @click="stopClick" class="in-ring">
        <div class="red-square"></div>
    </div>
</div>
<!--录制提示-->
<div v-show="!isRecording" class="tip">点击录制音频</div>

函数

javascript 复制代码
/**
 * 开始录音
 */
async startRecording() {
    let that = this
    try {
        const stream = await navigator.mediaDevices.getUserMedia({audio: true});
        that.mediaRecorder = new MediaRecorder(stream);
        that.mediaRecorder.ondataavailable = e => {
            that.audioChunks.push(e.data);
        };
        that.mediaRecorder.start();
        that.isRecording = true;

        that.timer = setTimeout(that.stopRecording, 15000);

    } catch (err) {
        that.$toast('录音失败')
    }
},

/**
 * 结束录音
 */
stopRecording() {
    this.mediaRecorder.stop();
    this.mediaRecorder.onstop = () => {
        let audioBlob = new Blob(this.audioChunks, {'type': 'audio/mp3; codecs=opus'});
        let soundUrl = URL.createObjectURL(audioBlob);

        //生成file对象
        let file = new File([audioBlob], 'yinpin.mp3', {
            type: 'application/json',
            lastModified: Date.now()
        })

        //页面播放录音
        this.showAudio(soundUrl)

        this.$store.commit('SET_AUDIO_FILE', file)
        this.$store.commit('SET_AUDIO_URL', soundUrl)

        // 重置音频块数组以备下次录音
        this.audioChunks = [];
    };
    this.isRecording = false;
    this.$toast('录音结束')
},

/**
 * 停止录音点击事件
 */
stopClick() {
    clearTimeout(this.timer);
    this.timer = null
    this.stopRecording()
},

/**
 * 展示音频
 */
showAudio(Url) {
    let audio = document.getElementById('audioPlayer');
    audio.src = Url;
    audio.load();
},

/**
 * 删除音频
 */
deleteAudio() {
    this.showAudio('');
    this.audioChunks = [];
    this.$store.commit('SET_AUDIO_FILE', null)
    this.$store.commit('SET_AUDIO_URL', null)
}

注意,在项目尚未发布时,也就是前端在手机上测试录音功能时,会出现navigator.mediaDevices未定义的情况,可以百度搜索,有三种解决办法。我的解决办法是:使用内网穿透,生成一个公网ip,就可以解决这个问题。具体教程可以参考这边文章:https://blog.csdn.net/qq_42978230/article/details/113618902。使用时,注意将本地地址改为localhost,文章中未提及这个。

相关推荐
博客zhu虎康40 分钟前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海1 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏1 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码2 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby2 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
上单带刀不带妹2 小时前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6
excel2 小时前
使用热力贴图和高斯函数生成山峰与等高线的 WebGL Shader 解析
前端
wyzqhhhh2 小时前
组件库打包工具选型(npm/pnpm/yarn)的区别和技术考量
前端·npm·node.js
码上暴富2 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
土了个豆子的3 小时前
04.事件中心模块
开发语言·前端·visualstudio·单例模式·c#