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,文章中未提及这个。

相关推荐
万少11 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL17 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl0232 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang34 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景36 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼36 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿38 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再40 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5551 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录1 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css