当前位置：首页 > VUE

vue实现收音机

2026-01-23 08:00:39VUE

Vue实现收音机功能

在Vue中实现收音机功能需要结合音频播放和电台调谐功能。以下是一个基本实现方案：

音频播放组件

创建一个音频播放组件，用于控制音频的播放、暂停和音量调节：

<template>
  <div>
    <audio ref="audioPlayer" :src="currentStation.url"></audio>
    <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
    <input type="range" v-model="volume" min="0" max="1" step="0.1" @input="setVolume">
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPlaying: false,
      volume: 0.5,
      currentStation: {
        name: '默认电台',
        url: 'http://example.com/radio.mp3'
      }
    }
  },
  methods: {
    togglePlay() {
      const audio = this.$refs.audioPlayer
      if(this.isPlaying) {
        audio.pause()
      } else {
        audio.play()
      }
      this.isPlaying = !this.isPlaying
    },
    setVolume() {
      this.$refs.audioPlayer.volume = this.volume
    },
    changeStation(station) {
      this.currentStation = station
      if(this.isPlaying) {
        this.$refs.audioPlayer.play()
      }
    }
  }
}
</script>

电台列表组件

创建一个电台列表组件，用于显示可用的电台并允许用户切换：

<template>
  <div>
    <h3>电台列表</h3>
    <ul>
      <li v-for="station in stations" :key="station.id" @click="selectStation(station)">
        {{ station.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    stations: {
      type: Array,
      required: true
    }
  },
  methods: {
    selectStation(station) {
      this.$emit('station-selected', station)
    }
  }
}
</script>

主应用组件

将上述组件组合在主应用组件中：

<template>
  <div>
    <h2>Vue收音机</h2>
    <radio-player ref="player"></radio-player>
    <station-list 
      :stations="stations" 
      @station-selected="changeStation">
    </station-list>
  </div>
</template>

<script>
import RadioPlayer from './RadioPlayer.vue'
import StationList from './StationList.vue'

export default {
  components: {
    RadioPlayer,
    StationList
  },
  data() {
    return {
      stations: [
        { id: 1, name: '音乐台', url: 'http://example.com/music.mp3' },
        { id: 2, name: '新闻台', url: 'http://example.com/news.mp3' },
        { id: 3, name: '体育台', url: 'http://example.com/sports.mp3' }
      ]
    }
  },
  methods: {
    changeStation(station) {
      this.$refs.player.changeStation(station)
    }
  }
}
</script>

进阶功能

频率调谐：添加模拟调谐旋钮，使用滑块控制频率

<input type="range" v-model="frequency" min="88" max="108" step="0.1" @input="tuneRadio">

收藏功能：允许用户收藏常用电台

methods: {
addFavorite(station) {
 if(!this.favorites.some(fav => fav.id === station.id)) {
   this.favorites.push(station)
 }
}
}

播放历史：记录用户最近收听的电台

watch: {
currentStation(newVal) {
 this.history.unshift(newVal)
 if(this.history.length > 5) {
   this.history.pop()
 }
}
}

可视化效果：添加音频频谱可视化

vue实现收音机

// 使用Web Audio API创建分析器节点
const audioContext = new (window.AudioContext || window.webkitAudioContext)()
const analyser = audioContext.createAnalyser()
const source = audioContext.createMediaElementSource(this.$refs.audioPlayer)
source.connect(analyser)
analyser.connect(audioContext.destination)