使用vue实现一个移动端页面录音业务，并实现路由跳转也可以录取声音

首先，你需要了解如何在移动端录音。可以使用HTML5提供的MediaRecorder API来实现。这个API允许我们在浏览器中录制媒体数据，如音频或视频。

以下是一个使用MediaRecorder API录制音频的示例代码：

// 获取用户麦克风权限
navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    // 创建 MediaRecorder 对象
    const mediaRecorder = new MediaRecorder(stream);

    // 录音数据存储数组
    const chunks = [];

    // 开始录音
    mediaRecorder.start();

    // 监听录音数据
    mediaRecorder.addEventListener("dataavailable", event => {
      chunks.push(event.data);
    });

    // 停止录音
    mediaRecorder.addEventListener("stop", () => {
      // 合并录音数据为 Blob 对象
      const blob = new Blob(chunks, { type: "audio/mp3" });

      // 播放录音
      const audio = new Audio(URL.createObjectURL(blob));
      audio.play();
    });

    // 停止录音
    setTimeout(() => {
      mediaRecorder.stop();
    }, 5000);
  });

以上代码会在用户授权后开始录制5秒钟的音频，并将其保存为Blob对象。你可以将其发送到服务器进行处理或保存。

接下来，你需要使用Vue.js来构建你的应用程序。你可以使用Vue CLI来创建一个新项目：

vue create my-project

一旦你完成了项目的创建，你可以使用Vue Router来实现路由跳转：

import Vue from "vue";
import Router from "vue-router";

import Record from "@/views/Record.vue";
import Play from "@/views/Play.vue";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      name: "record",
      component: Record
    },
    {
      path: "/play",
      name: "play",
      component: Play
    }
  ]
});

在上面的代码中，我们定义了两个路由，一个用于录音，另一个用于播放录音。

接下来，我们可以创建两个视图组件来处理这两个路由：

<template>
  <div>
    <button @click="startRecording">Start Recording</button>
    <button @click="stopRecording">Stop Recording</button>
    <button @click="uploadRecording">Upload Recording</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mediaRecorder: null,
      chunks: [],
      recording: false
    };
  },
  methods: {
    startRecording() {
      navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
        this.mediaRecorder = new MediaRecorder(stream);
        this.chunks = [];
        this.recording = true;
        this.mediaRecorder.start();
        this.mediaRecorder.addEventListener("dataavailable", event => {
          this.chunks.push(event.data);
        });
      });
    },
    stopRecording() {
      if (this.mediaRecorder) {
        this.mediaRecorder.stop();
        this.recording = false;
      }
    },
    uploadRecording() {
      if (this.chunks.length > 0) {
        const blob = new Blob(this.chunks, { type: "audio/mp3" });
        const formData = new FormData();
        formData.append("file", blob);
        // 发送录音数据到服务器
      }
    }
  }
};
</script>

以上代码实现了录音功能。当用户点击“Start Recording”按钮时，我们请求麦克风权限并开始录音。我们使用MediaRecorder API监听“dataavailable”事件来获取录音数据。当用户点击“Stop Recording”按钮时，我们停止录音。当用户点击“Upload Recording”按钮时，我们将录音数据发送到服务器。

<template>
  <div>
    <audio ref="audio" controls></audio>
  </div>
</template>

<script>
export default {
  mounted() {
    const audio = this.$refs.audio;
    const blob = this.$route.query.blob;
    audio.src = URL.createObjectURL(blob);
    audio.play();
  }
};
</script>

以上代码实现了播放录音功能。当用户访问“/play”路由时，我们从URL参数中获取Blob对象并将其设置为音频播放器的源。

最后，我们需要在Vue实例中使用Vue Router和我们创建的路由：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

至此，我们完成了一个使用Vue.js实现的移动端录音应用程序。