Vue音频

最新推荐文章于 2024-05-20 20:08:58 发布
最新推荐文章于 2024-05-20 20:08:58 发布
阅读量737 收藏 4
点赞数
分类专栏： 软件项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42955958/article/details/114643805
版权

wavesurfer

JS 音频可视化插件Wavesurfer.js的使用教程
Wavesurfer.js音频播放器插件的使用教程
wavesurfer.js使用搭配vue
在：

组件：

src\components\music\mymusic.vue

父

src\views\video\videodemo.vue

<el-card class="waveform-warp" style="background-color: #ffffff">
	<div id="waveform" />
	<div id="wave-timeline" />
</el-card>

在这里插入图片描述
waveform对应1
wave-timeline对应2

<script>
import '@/assets/zy_icon/iconfont.css'
import WaveSurfer from 'wavesurfer.js'
import SpectrogramPlugin from 'wavesurfer.js/src/plugin/spectrogram'
import CursorPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.cursor.js'
import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js'
import Regions from 'wavesurfer.js/dist/plugin/wavesurfer.regions.js'
export default {
  name: 'Audio',
  components: {},
  props: {
    url: {
      type: String,
      default: '',
    },
    showRound: {
      type: Boolean,
      default: true,
    },
    showCurrentTime: {
      type: Boolean,
      default: true,
    },
    showSpeed: {
      type: Boolean,
      default: true,
    },
    currentT: {
      type: String,
    },
  },
  data() {
    return {
      zoomValue: 100,
      zoomMin: 100,
      value: 0,
      isPlay: false,
      ppt: false,
      appointTime: 1,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.wavesurfer = WaveSurfer.create({
        // 特别提醒：此处需要使用require(相对路径)，否则会报错
        container: '#waveform',
        // 未播放的颜色
        waveColor: '#FF55C5',
        // 已播放的颜色
        progressColor: '#00BFBF',
        split: false,
        minPxPerSec: 8,
        height: 180,
        barWidth: 1,
        barHeight: 1.5,
        splitChannels: false,
        // 播放音频的速度
        audioRate: '1',
        plugins: [
           // 时间轴插件
          Timeline.create({
            container: '#wave-timeline',
          }),
          // SpectrogramPlugin.create({
          //   container: '#wave-spectrogram',
          //   labels: true,
          //   colorMap: this.colorMap,
          // }),
          
          // 光标插件
          CursorPlugin.create({
            showTime: true,
            opacity: 0.2,
            customShowTimeStyle: {
              'background-color': '#000',
              color: '#fff',
              padding: '2px',
              'font-size': '10px',
            },
          }),
         
          Regions.create(),
        ],
      })
      // 导入声音
      // 特别提醒：此处需要使用require(相对路径)，否则会报错
      this.wavesurfer.load(require('@/assets/music/music.mp3'))
      this.loading = false
      console.log(this.wavesurfer)
      // this.wavesurfer.load('mp3/demo.wav')
      this.value = this.wavesurfer.getVolume() * 100
      this.zoomValue = this.wavesurfer.params.minPxPerSec
      this.zoomMin = this.wavesurfer.params.minPxPerSec
      this.wavesurfer.zoom(Number(this.zoomValue))
      this.wavesurfer.panner = this.wavesurfer.backend.ac.createPanner()
      this.wavesurfer.backend.setFilter(this.wavesurfer.panner)
      const _this = this
      this.wavesurfer.on('ready', function () {
        _this.wavesurfer.enableDragSelection({
          color: _this.randomColor(0.1),
        })
        // 这里是自定义的划分区域
        // _this.loadRegions(_this.noteData)
      })
      // 区域插件的region-click事件
      this.wavesurfer.on('region-click', function (region, e) {
        // 阻止事件冒泡
        e.stopPropagation()
        e.shiftKey ? region.playLoop() : region.play()
      })

      this.wavesurfer.on('region-click', this.editAnnotation)
      this.wavesurfer.on('region-updated', this.saveRegions)
      this.wavesurfer.on('region-removed', this.saveRegions)
      this.wavesurfer.on('region-in', this.showNote)
      this.wavesurfer.on('region-play', function (region) {
        region.once('out', function () {
          this.wavesurfer.play(region.start)
          this.wavesurfer.pause()
        })
      })
    })
  },
  methods: {
    modeSwitch() {
      this.modeValue = !this.modeValue
    },
    plays() {
      this.isPlay = !this.isPlay
      this.wavesurfer.playPause()
    },
    rew() {
      this.wavesurfer.skip(-3)
    },
    speek() {
      this.wavesurfer.skip(3)
    },
    replay() {
      this.isPlay = false
      this.wavesurfer.stop()
    },
    DoubleSpeed(c, o) {
      this.wavesurfer.setPlaybackRate(c)
    },
    // 声道
    channelsChange(value) {
      const _this = this
      console.log(value)
      switch (value) {
        case 'dbChannels':
          _this.wavesurfer.panner.setPosition(0, 0, 0)
          break
        case 'leftChannels':
          _this.wavesurfer.panner.setPosition(-0.7, 0, 0)
          break
        case 'rightChannels':
          _this.wavesurfer.panner.setPosition(0.7, 0, 0)
          break
      }
    },
    // 缩放百分比显示格式
    formatZoom(val) {
      return val + 100 + ' 像素 / 秒'
    },
    // 缩放监听
    zoomChange() {
      this.wavesurfer.zoom(Number(this.zoomValue))
    },
    // 新建
    saveRegions() {
      const _this = this
      this.noteData = Object.keys(_this.wavesurfer.regions.list).map(function (
        id
      ) {
        console.log(id)
        const region = _this.wavesurfer.regions.list[id]
        // _this.noteForm.id = id
        // _this.noteForm.edit = false
        // _this.noteForm.startTime = Math.round(region.start * 10) / 10
        // _this.noteForm.endTime = Math.round(region.end * 10) / 10
        // _this.noteForm.data.note = region.data.note || ''
        return {
          id: id,
          edit: false,
          start: Math.round(region.start * 10) / 10,
          end: Math.round(region.end * 10) / 10,
          attributes: region.attributes,
          data: { note: region.data.note || '' },
        }
      })
    },
    // 从localStorage加载区域
    loadRegions(regions) {
      const _this = this
      regions.forEach(function (region) {
        region.color = _this.randomColor(0.1)
        _this.wavesurfer.addRegion(region)
      })
    },
    // RGB颜色生成器
    randomColor(alpha) {
      return (
        'rgba(' +
        [
          ~~(Math.random() * 255),
          ~~(Math.random() * 255),
          ~~(Math.random() * 255),
          alpha || 1,
        ] +
        ')'
      )
    },
    // 编辑保存
    editAnnotation(region) {
      console.log("region:",region)
      this.onSaveNote = function (row) {
        row.edit = false

        region.update({
          start: Math.round(region.start * 10) / 10,
          end: Math.round(region.end * 10) / 10,
          data: {
            note: row.note || '',
          },
        })
      }
    },
    showNote(region) {
      if (!this.showNote.el) {
        this.showNote.el = document.querySelector('#subtitle')
      }
      this.showNote.el.textContent = region.data.note || '–'
    },
    onSaveNote(row) {
      row.edit = !row.edit
      const region = this.wavesurfer.regions.list[row.id]
      console.log(row.data.note)
      region.update({
        start: row.start,
        end: row.end,
        data: {
          note: row.data.note || '',
        },
      })
    },
    onDeleteNote() {},

    // 音量
    setVolume(val) {
      this.wavesurfer.setVolume(val / 100)
    },
    formatS(s) {
      const minute = Math.floor(s / 60)
      const second = Math.floor(s - minute * 60)
      const centisecond = Math.floor((s - minute * 60 - second) * 100)
      return (
        (minute.toString().length === 1 ? '0' + minute : minute) +
        ':' +
        (second.toString().length === 1 ? '0' + second : second) +
        ':' +
        centisecond +
        "'"
      )
    },
    // 指定播放
    appointPlay() {
      this.isPlay = true
      this.wavesurfer.play([this.currentT])
    },
    submitAnswer() {},
  },
}
</script>


 // 区域插件的region-click事件
 this.wavesurfer.on('region-click', function (region, e) {
   // 阻止事件冒泡
   e.stopPropagation()
   e.shiftKey ? region.playLoop() : region.play()
 })

注意，这里的 ‘region-click’ 不是指点击波形图，而是先选中区域：
在这里插入图片描述
然后点击区域中才会触发

参考资料：
wavesurfer官网
Wavesurfer.js音频播放器插件的使用教程
浅析wavesurfer.js中各大方法的使用

实现点击某处，就定位，并根据isPlay决定是否播放

this.$nextTick(() => {
      this.wavesurfer = WaveSurfer.create({
        // 特别提醒：此处需要使用require(相对路径)，否则会报错
        container: '#waveform',
        // 未播放的颜色
        waveColor: '#FF55C5',
        // 已播放的颜色
        progressColor: '#00BFBF',
        split: false,
        minPxPerSec: 8,
        height: 180,
        barWidth: 1,
        barHeight: 1.5,
        splitChannels: false,
        // 播放音频的速度
        audioRate: '1',
        plugins: [
          // 时间轴插件
          Timeline.create({
            container: '#wave-timeline',
          }),
          // SpectrogramPlugin.create({
          //   container: '#wave-spectrogram',
          //   labels: true,
          //   colorMap: this.colorMap,
          // }),
          // 光标插件
          CursorPlugin.create({
            showTime: true,
            opacity: 0.2,
            customShowTimeStyle: {
              'background-color': '#000',
              color: '#fff',
              padding: '2px',
              'font-size': '10px',
            },
          }),

          Regions.create(),
        ],
      })
      // 导入声音
      // 特别提醒：此处需要使用require(相对路径)，否则会报错
      this.wavesurfer.load(require('@/assets/music/music.mp3'))
      this.loading = false
      console.log(this.wavesurfer)
      // this.wavesurfer.load('mp3/demo.wav')
      this.value = this.wavesurfer.getVolume() * 100
      this.zoomValue = this.wavesurfer.params.minPxPerSec
      this.zoomMin = this.wavesurfer.params.minPxPerSec
      this.wavesurfer.zoom(Number(this.zoomValue))
      this.wavesurfer.panner = this.wavesurfer.backend.ac.createPanner()
      this.wavesurfer.backend.setFilter(this.wavesurfer.panner)
      const _this = this
      this.wavesurfer.on('ready', function () {
        _this.wavesurfer.enableDragSelection({
          color: _this.randomColor(0.1),
        })
        // 这里是自定义的划分区域
        // _this.loadRegions(_this.noteData)
      })

      // 光标移动后播放
      this.wavesurfer.on('seek', () => {
        if (this.isPlay) {
          this.wavesurfer.play()
        }
      })

      // console.log(this.wavesurfer.getCurrentTime())
      /** audioprocess，获取当前时间 */
      this.wavesurfer.on('audioprocess', () => {
        this.currentTime = this.changeTime(this.wavesurfer.getCurrentTime())
      })

      // 区域插件的region-click事件
      // 选中了区域的点击才会触发
      this.wavesurfer.on('region-click', function (region, e) {
        // 阻止事件冒泡
        e.stopPropagation()
        e.shiftKey ? region.playLoop() : region.play()
      })

      this.wavesurfer.on('region-click', this.editAnnotation)
      this.wavesurfer.on('region-updated', this.saveRegions)
      this.wavesurfer.on('region-removed', this.saveRegions)
      this.wavesurfer.on('region-in', this.showNote)
      this.wavesurfer.on('region-play', function (region) {
        region.once('out', function () {
          this.wavesurfer.play(region.start)
          this.wavesurfer.pause()
        })
      })
    })

主要是这个：

 // 光标移动后播放
 this.wavesurfer.on('seek', () => {
    if (this.isPlay) {
      this.wavesurfer.play()
    }
 })

实现根据自定义 currentTime 播放某处

watch: {
  currentT(val, oldVal) {
     //普通的watch监听
     console.log('currentT: ' + val)
     this.currentTime = this.currentT
     this.appointPlay()
   },
 },

// 指定播放
appointPlay() {
  this.isPlay = true
  this.wavesurfer.play([this.currentT])
},

固定只一个region

Question: Limit the number of regions to one?

 this.wavesurfer.on('region-created', () => {
   this.wavesurfer.clearRegions()
 })

遍历object

js中常见的几种对象遍历方式Object

web前端-纯前端音频剪辑，vue音频编辑组件

<el-dropdown-menu slot="dropdown">
  <el-dropdown-item>淡入</el-dropdown-item>
  <el-dropdown-item>淡出</el-dropdown-item>
  <el-dropdown-item>速度</el-dropdown-item>
  <el-dropdown-item @click.native="channelsLeft">左声道</el-dropdown-item>
  <el-dropdown-item @click.native="channelsRight">右声道</el-dropdown-item>
  <el-dropdown-item @click.native="channelsDouble">双声道</el-dropdown-item>
</el-dropdown-menu>

要加一个native才可以触发成功

@click.native="channelsRight"

也许可以借鉴的

所有的基本操作都放在了audiomass的action.js中

录音

vue实现录音功能js-audio-recorder带波浪图

load加载

1、如果已经提取出了音频的，就直接加载，这个时候url已经有值
2、如果没提取的，就是url为空，暂时不加载，监听url变化，一有就开始加载，配合v-show不是v-if

Vue监听空格

主要通过：

document.onkeydown = (e) => {} 来监听，32对于空格
不再监听，就document.onkeydown = ‘’

openListen() {
  console.log('1')
  if (this.keyFrameFlag) {
    document.onkeydown = (e) => {
      let key = window.event.keyCode
      if (key == 32) {
        //== 83 && event.ctrlKey
        window.event.preventDefault() //关闭浏览器快捷键
        this.keyFrameSpace() //;saveProject1()
      }
    }
  } else {
    document.onkeydown = ''
  }
},
// 空格监听，选区域
keyFrameSpace() {
  // 判断是否在播放
  var flag = this.wavesurfer.isPlaying()
  console.log(flag)
  if (flag) {
    // 获取当前时间点
    var cTime = this.wavesurfer.getCurrentTime()
    var cTimeStr = this.format(cTime)
    var len = this.regiontime.length
    if (len <= 1) {
      this.regiontime.push(cTimeStr)
    } else {
      this.regiontime.splice(0, 1, this.regiontime[1])
      this.regiontime.splice(1, 1, cTimeStr)
    }
    len = this.regiontime.length
    if (len == 2) {
      this.createRegion()
    }
    console.log(this.regiontime)
  } else {
    this.$message({
      message: '请先播放',
      type: 'warning',
      duration: 1000,
    })
  }
},

SpeechSynthesizer （可以网页读文本）

System.Speech.Synthesis 保存合成语音

音频处理

可能有用：
JS纯前端实现audio音频剪裁剪切复制播放与上传
web前端-纯前端音频剪辑，vue音频编辑组件

weixin_42955958
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端:音频可视化（H5+js版本）
qq_45820271的博客
05-20 555
前端可视化音频，H5+JS，复制粘贴换个音频链接就能用
声纹图-声谱图-js之wavesurfer.js（配置、事件、方法中文版翻译）
仙途路漫漫其修远兮
01-03 4637
声纹图，声谱图之使用 wavesurfer.js插件实现。wavesurfer.js 配置、事件、方法 中文翻译版本。
前端：音频可视化（VUE3+TS版本）
最新发布
qq_45820271的博客
05-20 410
记录一下前端的可视化音频实现方式，vue3+ts的版本
vue-waveform-使用画布波形音频播放器waveurfer组件包含Vue 2.x的时间线条线-Vue.js开发
05-27
用法安装npm -i从“ vue-waveform”导入vue-waveform Vue.use（波形）说明场景websocket数组缓冲文件mp3 aac blob用法安装npm -i vue-waveform从“ vue-waveform导入{waveform} 'Vue.use（波形）说明场景websocket arraybuffer文件mp3 aac blob arraybuffer组件vue波形 props attr类型默认说明WIDTH Number 500画布WIDTH HEIGHT Number 3
vue中音频wavesurfer.js如何加载静态文件和接口返回文件
weixin_44039397的博客
04-20 3522
1、安装wavesurfer npm install wavesurfer.js 2、在页面导入 import WaveSurfer from "wavesurfer.js" 注:由于我使用了光标，所以引入了光标插件，具体根据需要自行引入 import CursorPlugin from "wavesurfer.js/dist/plugin/wavesurfer.cursor.js"; 3、创建wavesurfer createWaveSurfer(blob){ this.$nextTic
前端音频处理之AudioMass调研
路漫漫其修远兮，吾将上下而求索。
08-23 2263
AudioMass 是一个免费开源的在线音频编辑应用，支持录制或使用现有的音频曲目，并通过修剪、切割、粘贴或应用大量效果来修改它们，从压缩和段落均衡器到混响、延迟和失真 fx，易用高效，能满足大部分的非专业人士的音频编辑需求。
vue使用js-audio-recorder实现录音功能
热门推荐
qsya的博客
09-02 1万+
vue使用js-audio-recorder实现录音功能前言1.安装2.引用3.页面4.方法5.播放总结 前言 最近项目中需要实现一个录音上传功能，用于考试、作业中，学生可以上传朗读课文的录音，安排。 效果图 1.安装 npm i js-audio-recorder 2.引用 import Recorder from 'js-audio-recorder' this.recorder = new Recorder() 3.页面 <!-- 录音上传 --> <Moda
vue绘制语音波形图---wavesurfer.js
weixin_43956958的博客
02-04 2736
通过XMLHttpRequest对象向后端发出请求，获取音频数据的blob流。然后通过WaveSurfer.create()方法创建一个wavesurfer实例，传入一个容器元素和一些配置选项。最后调用loadBlob()方法将blob数据传递给wavesurfer进行处理。这样就可以在前端使用wavesurfer.js处理后端传递过来的音频数据了。封装websocket。
适用于PC移动端的Vue音频播放器组件
08-10
Vue音频播放器组件是基于Vue.js框架开发的一款通用音频播放解决方案，它专为适应PC和移动端设备而设计。Vue.js是一个轻量级、高性能的前端MVVM（Model-View-ViewModel）框架，使得构建用户界面变得更为简洁和高效。...
vue播放组件 vue音频播放子组件
09-13
这样，我们就实现了一个功能完备的Vue音频播放子组件，支持音频的暂停、播放、进度条拖动和播放区间设置。在实际项目中，你可能还需要根据需求添加更多的功能，如音量控制、循环播放、播放列表等。
基于 Vue 的小巧简单实用的 PC 移动端的 Vue 音频播放器组件.zip
03-07
这个名为“基于 Vue 的小巧简单实用的 PC 移动端的 Vue 音频播放器组件”的项目，显然旨在为开发者提供一个方便集成到 Vue 应用中的音频播放功能。通过这个组件，开发者可以在他们的网页或应用程序中添加音乐播放的...
vue-audio-visual-Vue HTML5音频可视化组件。-Vue.js开发
05-27
vue视听Vue HTML5音频可视化组件概述安装和设置API通用道具AvLine道具AvBars道具AvCircle道具AvWavef vue视听Vue HTML5音频可视化组件概述安装和设置API常用道具AvLine道具AvBars道具AvCircle道具AvWaveform道具...
推荐开源项目：AudioMass - 网页音频与波形编辑的利器
gitblog_00078的博客
05-12 297
推荐开源项目：AudioMass - 网页音频与波形编辑的利器 项目地址:https://gitcode.com/pkalogiros/AudioMass 1、项目介绍 AudioMass是一个免费且功能强大的网页版音频和波形编辑工具。无需下载安装任何桌面软件，只需访问https://audiomass.co，您就能随时随地进行专业级别的音频处理。不仅如此，对于开发人员而言，您还可以将它部署到自己...
2021/9/24 js-audio-recorder实现录音功能
Zhang_aichi的博客
09-24 1205
开始录音 // 开始录音 startRecorder() { let that = this; recorder.start().then( () => { this.disnext = true; // 绑定事件-打印的是当前录音数据 recorder.onprogress = function (params) { that.duration = params.
vue项目中定制化音频展示，wavesurfer.js基本使用
zhang_zan
10-27 2268
vue项目中定制化音频
声纹可视化工具：wavesurfer.js---在Vue中使用音频声纹可视化插件wavesurfer.js【已封装成组件有完整demo实例附完整代码】
南北极之间
12-30 1万+
在Vue中 完整代码在最后。 使用方法： 1、第一步：使用以下命令安装wavesurfer.js插件库 npm install wavesurfer.js --save 2、第二步：在需要使用的页面import导入wavesurfer.js和其中的时间轴timeline插件 import WaveSurfer from 'wavesurfer.js' import CursorPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.cursor.
浅析wavesurfer.js中各大方法的使用
只如初见0706的博客
03-05 1万+
前言：实现效果如下，包含后退，播放暂停，前进，指定播放，音量，播放倍速修改等功能 1、
vue中使用wavesurfer.js实现语音播放波形显示
AiTingYan的博客
06-24 2073
效果图如下： 1、第一步：使用以下命令安装wavesurfer.js插件库 npm install wavesurfer.js --save 2、第二步：在compenets文件夹创建voice.vue <template> <div :class="{'voice_wrap':true,'large':duration>40,'middle':duration>20&&duration<41,'small':duration<21}"&gt
wavesurferjs+vue+ElementUi(音频标注案例)全网完整案例实现免费查看
vh_YUNYANGYUMO的博客
03-03 1901
waveserfurjs完整案例，音频标注功能（音频可视化频波图）代码免费查看，点击速进
vue音频播放器插件
08-31
Vue音频播放器插件有多种引入方式。一种是全局引入，通过import语句将插件引入，并使用Vue.use()方法将插件注册到Vue实例中。例如，可以使用以下代码将@liripeng/vue-audio-player插件作为全局组件引入: ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

weixin_42955958

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值