当前位置：首页 > VUE

vue实现收音机

2026-02-23 22:40:26VUE

Vue实现收音机功能

在Vue中实现收音机功能需要结合Web Audio API或第三方音频库来处理音频流。以下是一个基于Vue 3的实现方案：

创建音频上下文

在Vue组件中初始化Web Audio API的音频上下文：

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
let sourceNode = null;

获取音频流

使用浏览器提供的媒体接口获取音频流：

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    sourceNode = audioContext.createMediaStreamSource(stream);
    sourceNode.connect(audioContext.destination);
  })
  .catch(err => {
    console.error('无法获取麦克风权限:', err);
  });

实现音量控制

添加音量控制功能：

const gainNode = audioContext.createGain();
let volume = 1;

function setVolume(value) {
  volume = value;
  gainNode.gain.value = volume;
}

频率分析

添加频率分析可视化：

const analyser = audioContext.createAnalyser();
analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

function updateVisualization() {
  analyser.getByteFrequencyData(dataArray);
  // 使用dataArray绘制可视化效果
  requestAnimationFrame(updateVisualization);
}

组件封装

将功能封装为Vue组件：

vue实现收音机

<template>
  <div class="radio-container">
    <button @click="toggleRecording">{{ isRecording ? '停止' : '开始' }}收音</button>
    <input type="range" min="0" max="2" step="0.1" v-model="volume" @input="setVolume">
    <canvas ref="visualizer" width="300" height="100"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRecording: false,
      volume: 1,
      audioContext: null,
      sourceNode: null
    };
  },
  methods: {
    async toggleRecording() {
      if (!this.isRecording) {
        await this.startRecording();
      } else {
        this.stopRecording();
      }
      this.isRecording = !this.isRecording;
    },
    async startRecording() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
        this.sourceNode = this.audioContext.createMediaStreamSource(stream);
        this.sourceNode.connect(this.audioContext.destination);
      } catch (err) {
        console.error('录音错误:', err);
      }
    },
    stopRecording() {
      if (this.sourceNode) {
        this.sourceNode.disconnect();
      }
    },
    setVolume() {
      if (this.audioContext) {
        const gainNode = this.audioContext.createGain();
        gainNode.gain.value = this.volume;
        this.sourceNode.connect(gainNode);
        gainNode.connect(this.audioContext.destination);
      }
    }
  }
};
</script>