美文网首页
js 播放本地上传的音频

js 播放本地上传的音频

作者: 天天喜欢钱 | 来源:发表于2024-01-28 08:21 被阅读0次

前端使用el-upload上传音频后,获取文件流

声明四个要使用的变量

this.audioFile = file.raw//获取上传的音频文件

this.audioContext = new AudioContext()//创建新的音频上下文

let reader = new FileReader()//文件阅读器

reader.onload = e => {

        let audioData = e.target.result

        this.audioContext.decodeAudioData(audioData, buffer => {// 解码音频数据

          this.audioBuffer = buffer

          this.playAudio()

        }, error => {

          console.error('音频解码错误', error)

        })

      }

reader.readAsArrayBuffer(this.audioFile)//读取文件

playAudio() {

      if (this.audioSource) { // 停止正在播放的音频

        this.audioSource.stop()

      }

      // 创建音频源并开始播放

      this.audioSource = this.audioContext.createBufferSource()

      this.audioSource.buffer = this.audioBuffer

      this.audioSource.loop = true

      this.audioSource.connect(this.audioContext.destination)

      this.audioSource.start()

    }

最终代码

相关文章

  • iOS 音频播放(本地,网络)

    1.本地音频播放 播放本地音频文件(AVAudioPlayer) 参考链接 2.网络音频播放 2.1播放网络音频文...

  • HTML5的 input:file上传类型控制

    HTML5的 input:file上传类型控制 JS读取/创建本地文件及目录文件夹的方法 JS音频转码 HTML5...

  • 七牛视频上传

    HTML5的 input:file上传类型控制 JS读取/创建本地文件及目录文件夹的方法 JS音频转码 HTML5...

  • iOS音频

    iOS中支持的音频播放类型播放音效System Sound Service播放本地音频AVFoundataion播...

  • 几种播放音频文件的方式

    几种播放音频文件的方式(一) —— 播放本地音乐几种播放音频文件的方式(二) —— 音效播放几种播放音频文件的方式...

  • Android音视频<第三篇>:简单音频播放实现

    播放音频需要借助MediaPlayer对象,MediaPlayer可以播放本地音频和网络音频。文本的目的是为了尝试...

  • iOS 封装控件之音视频播放

    音频播放 视频播放 本地播放、网络播放、边下边播 缓存进度 播放进度 自动播放 音频后台播放 全屏播放(demo中...

  • Note 13 播放器

    音频播放 AVAudioplayer AVAudioplayer 只能播放本地音乐 每个AVAudioplayer...

  • AVFoundation 学习 AVAudioPlayer

    关于音频播放苹果为我们封装了一个很好用的类 AVAudioPlayer ,它可以播放本地音频,也可以播放在线音频,...

  • iOS播放音频

    1.播放网络音频 2.播放本地音频 注意: 1.两种方法player必须是全局的,否则播放没有声音。 2.本地音乐...

网友评论

      本文标题:js 播放本地上传的音频

      本文链接:https://www.haomeiwen.com/subject/fsapodtx.html