Vue试听本地磁盘的音频

最新推荐文章于 2025-05-31 16:02:29 发布

qzhcode

最新推荐文章于 2025-05-31 16:02:29 发布

阅读量1.8k

点赞数 1

文章标签： vue.js 音视频 javascript

本文链接：https://blog.youkuaiyun.com/weixin_45880538/article/details/131725327

版权

文章介绍了在Vue项目中如何实现音频文件的试听功能。通过监听input[type=file]的change事件获取本地文件，使用URL.createObjectURL创建可播放的URL，然后绑定到audio元素上，点击按钮即可播放选定的音频文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue试听本地磁盘的音频

问题描述：项目中涉及到一个报警声音选择，有一个试听的功能，
试听后觉得可以才把file文件传给服务端，需要前端自己实现试听本地磁盘的音频；

主要代码如下：

<template>
  <div>
    <input
      type="file"
      ref="fileInput"
      @change="handleFileChange"
    >
    <audio ref="audioPlayer"></audio>
    <button @click="playAudio">播放音频</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      audioPath: "",
    };
  },
  mounted() {},

  methods: {
    handleFileChange() {
      const file = this.$refs.fileInput.files[0];
      console.log(file);
      this.audioPath = URL.createObjectURL(file);
      console.log(this.audioPath);
    },
    playAudio() {
      const audio = this.$refs.audioPlayer;
      audio.src = this.audioPath;
      audio.play();
    },
  },
};
</script>
<style lang='css' scoped>
</style>