{"version":3,"sources":["webpack:///./src/views/test/audioEditor.vue?386d","webpack:///./src/views/test/audioEditor.vue?a12d","webpack:///src/views/test/audioEditor.vue","webpack:///./src/views/test/audioEditor.vue?b83e","webpack:///./src/views/test/audioEditor.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","ref","attrs","on","play","_v","pause","stop","audition","add","onVolumeSwitch","volumeInput","model","value","callback","$$v","volume","expression","_s","currentTime","totalTime","staticStyle","$event","inputBlur","regionalTime","$set","onResetTime","tableData","tableRowClassName","scopedSlots","_u","key","fn","scope","row","startTime","endTime","handleAudition","$index","handleEdit","handleDelete","dialogTitle","dialogFormVisible","form","formLabelWidth","slot","addRegional","staticRenderFns","name","components","data","wavesurfer","percent","speed","id","volumeState","computed","watch","created","mounted","init","methods","audioRate","forceDecode","backgroundColor","waveColor","progressColor","cursorColor","barWidth","height","plugins","createRegion","load","currentRegion","addRegion","start","end","loop","color","console","log","_this","changeTime","getDuration","setVolume","val","hour","Math","floor","seconds","minutes","flng","remove","state","$message","error","indexOf","timesId","push","map","item","index","JSON","parse","stringify","splice","beforeMount","updated","beforeDestroy","destroyed","component"],"mappings":"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","file":"js/chunk-6bacf450.e9f10b6d.js","sourcesContent":["import mod from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./audioEditor.vue?vue&type=style&index=0&id=88ffcd22&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./audioEditor.vue?vue&type=style&index=0&id=88ffcd22&lang=scss&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"audio-editor-container\"},[_c('div',{ref:\"timeline\",attrs:{\"id\":\"timeline\"}}),_c('div',{ref:\"waveform\",attrs:{\"id\":\"waveform\"}}),_c('div',{staticClass:\"button-all\"},[_c('el-button',{attrs:{\"type\":\"primary\"},on:{\"click\":_vm.play}},[_vm._v(\"播放\")]),_c('el-button',{attrs:{\"type\":\"info\"},on:{\"click\":_vm.pause}},[_vm._v(\"暂停\")]),_c('el-button',{attrs:{\"type\":\"danger\"},on:{\"click\":_vm.stop}},[_vm._v(\"停止\")]),_c('el-button',{on:{\"click\":_vm.audition}},[_vm._v(\"试听\")]),_c('el-button',{attrs:{\"type\":\"success\"},on:{\"click\":_vm.add}},[_vm._v(\"添加\")]),_c('div',{staticClass:\"icon-outline\"},[_c('span',{staticClass:\"el-icon-phone-outline\",on:{\"click\":_vm.onVolumeSwitch}}),_c('div',{staticClass:\"block\"},[_c('el-slider',{attrs:{\"vertical\":\"\",\"height\":\"50px\"},on:{\"input\":_vm.volumeInput},model:{value:(_vm.volume),callback:function ($$v) {_vm.volume=$$v},expression:\"volume\"}})],1)])],1),_c('p',[_vm._v(\"当前播放时间：\"+_vm._s(_vm.currentTime)+\" / \"+_vm._s(_vm.totalTime))]),_c('p',[_vm._v(\"音频片段时间： \"),_c('el-input',{staticStyle:{\"width\":\"110px\"},attrs:{\"placeholder\":\"开始时间\",\"maxlength\":\"12\",\"size\":\"mini\"},on:{\"blur\":function($event){return _vm.inputBlur('startBlur')}},model:{value:(_vm.regionalTime.startTime),callback:function ($$v) {_vm.$set(_vm.regionalTime, \"startTime\", $$v)},expression:\"regionalTime.startTime\"}}),_vm._v(\" — \"),_c('el-input',{staticStyle:{\"width\":\"110px\"},attrs:{\"placeholder\":\"结束时间\",\"maxlength\":\"12\",\"size\":\"mini\"},on:{\"blur\":function($event){return _vm.inputBlur('endBlur')}},model:{value:(_vm.regionalTime.endTime),callback:function ($$v) {_vm.$set(_vm.regionalTime, \"endTime\", $$v)},expression:\"regionalTime.endTime\"}}),_c('el-button',{on:{\"click\":_vm.onResetTime}},[_vm._v(\"重置\")])],1),_c('el-table',{staticStyle:{\"width\":\"100%\"},attrs:{\"data\":_vm.tableData,\"border\":\"\",\"row-class-name\":_vm.tableRowClassName}},[_c('el-table-column',{attrs:{\"type\":\"index\",\"label\":\"序号\",\"width\":\"80\"}}),_c('el-table-column',{attrs:{\"prop\":\"name\",\"label\":\"音频片段名称\",\"width\":\"150\"}}),_c('el-table-column',{attrs:{\"label\":\"音频片段起止时间\",\"width\":\"250\"},scopedSlots:_vm._u([{key:\"default\",fn:function(scope){return [_c('span',[_vm._v(_vm._s(scope.row.startTime))]),_vm._v(\" — \"),_c('span',[_vm._v(_vm._s(scope.row.endTime))])]}}])}),_c('el-table-column',{attrs:{\"label\":\"操作\",\"width\":\"300\"},scopedSlots:_vm._u([{key:\"default\",fn:function(scope){return [_c('el-button',{attrs:{\"size\":\"mini\"},on:{\"click\":function($event){return _vm.handleAudition(scope.$index, scope.row)}}},[_vm._v(\"试听\")]),_c('el-button',{attrs:{\"size\":\"mini\"},on:{\"click\":function($event){return _vm.handleEdit(scope.$index, scope.row)}}},[_vm._v(\"编辑\")]),_c('el-button',{attrs:{\"size\":\"mini\",\"type\":\"danger\"},on:{\"click\":function($event){return _vm.handleDelete(scope.$index, scope.row)}}},[_vm._v(\"删除\")])]}}])})],1),_c('el-dialog',{attrs:{\"title\":_vm.dialogTitle,\"visible\":_vm.dialogFormVisible},on:{\"update:visible\":function($event){_vm.dialogFormVisible=$event}}},[_c('el-form',{attrs:{\"model\":_vm.form}},[_c('el-form-item',{attrs:{\"label\":\"音频片段名称\",\"label-width\":_vm.formLabelWidth}},[_c('el-input',{attrs:{\"autocomplete\":\"off\"},model:{value:(_vm.form.name),callback:function ($$v) {_vm.$set(_vm.form, \"name\", $$v)},expression:\"form.name\"}})],1)],1),_c('div',{staticClass:\"dialog-footer\",attrs:{\"slot\":\"footer\"},slot:\"footer\"},[_c('el-button',{on:{\"click\":function($event){_vm.dialogFormVisible = false}}},[_vm._v(\"取 消\")]),_c('el-button',{attrs:{\"type\":\"primary\"},on:{\"click\":_vm.addRegional}},[_vm._v(\"确 定\")])],1)],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"audio-editor-container\">\n    <div id=\"timeline\" ref=\"timeline\" />\n    <div id=\"waveform\" ref=\"waveform\"></div>\n\n    <div class=\"button-all\">\n      <el-button type=\"primary\" @click=\"play\">播放</el-button>\n      <el-button type=\"info\" @click=\"pause\">暂停</el-button>\n      <el-button type=\"danger\" @click=\"stop\">停止</el-button>\n      <el-button @click=\"audition\">试听</el-button>\n      <el-button type=\"success\" @click=\"add\">添加</el-button>\n      <div class=\"icon-outline\">\n        <span class=\"el-icon-phone-outline\" @click=\"onVolumeSwitch\"></span>\n        <div class=\"block\">\n          <el-slider\n            v-model=\"volume\"\n            vertical\n            height=\"50px\"\n            @input=\"volumeInput\">\n          </el-slider>\n         </div>\n      </div>\n    </div>\n    <p>当前播放时间：{{currentTime}} / {{totalTime}}</p>\n    <p>音频片段时间：\n      <el-input v-model=\"regionalTime.startTime\" placeholder=\"开始时间\" maxlength=\"12\" size=\"mini\" style=\"width: 110px;\" @blur=\"inputBlur('startBlur')\"></el-input> — \n      <el-input v-model=\"regionalTime.endTime\" placeholder=\"结束时间\" maxlength=\"12\" size=\"mini\" style=\"width: 110px;\" @blur=\"inputBlur('endBlur')\"></el-input>\n      <el-button @click=\"onResetTime\">重置</el-button>\n    </p>\n\n    <el-table :data=\"tableData\" border style=\"width: 100%\" :row-class-name=\"tableRowClassName\">\n      <el-table-column\n        type=\"index\"\n        label=\"序号\"\n        width=\"80\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"音频片段名称\"\n        width=\"150\">\n      </el-table-column>\n      <el-table-column\n        label=\"音频片段起止时间\"\n        width=\"250\">\n        <template slot-scope=\"scope\">\n          <span>{{scope.row.startTime}}</span> — <span>{{scope.row.endTime}}</span>\n        </template>\n      </el-table-column>\n      <el-table-column label=\"操作\" width=\"300\">\n        <template slot-scope=\"scope\">\n          <el-button\n            size=\"mini\"\n            @click=\"handleAudition(scope.$index, scope.row)\">试听</el-button>\n          <el-button\n            size=\"mini\"\n            @click=\"handleEdit(scope.$index, scope.row)\">编辑</el-button>\n          <el-button\n            size=\"mini\"\n            type=\"danger\"\n            @click=\"handleDelete(scope.$index, scope.row)\">删除</el-button>\n        </template>\n      </el-table-column>\n    </el-table>\n\n    <el-dialog :title=\"dialogTitle\" :visible.sync=\"dialogFormVisible\">\n      <el-form :model=\"form\">\n        <el-form-item label=\"音频片段名称\" :label-width=\"formLabelWidth\">\n          <el-input v-model=\"form.name\" autocomplete=\"off\"></el-input>\n        </el-form-item>\n      </el-form>\n      <div slot=\"footer\" class=\"dialog-footer\">\n        <el-button @click=\"dialogFormVisible = false\">取 消</el-button>\n        <el-button type=\"primary\" @click=\"addRegional\">确 定</el-button>\n      </div>\n    </el-dialog>\n  </div>\n</template>\n\n<script>\nimport WaveSurfer from 'wavesurfer.js'\nimport Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline'//Timeline插件\nimport Region from 'wavesurfer.js/dist/plugin/wavesurfer.regions'//regions插件\nimport Cursor from 'wavesurfer.js/dist/plugin/wavesurfer.cursor'\n\nexport default {\n  name: 'audio-editor',\n  components: {},\n  data() {\n    return {\n      wavesurfer: null,\n      percent: null,\n      speed: 1,\n      tableData: [],\n      currentTime: '00:00:00.000', // 当前播放时间\n      totalTime: '00:00:00.000', // 音频总时长\n      // 区域时间\n      regionalTime: {\n        startTime: '00:00:02.000',\n        endTime: '00:00:05.000',\n      },\n      dialogTitle: '添加音频片段',\n      dialogFormVisible: false,\n      form: {\n        id: '',\n        name: '',\n        startTime: '',\n        endTime: '',\n      },\n      formLabelWidth: '120px',\n      volume: 50, // 默认音量\n      volumeState: true, // 音量开关状态 true:有音量\n    }\n  },\n  computed: {},\n  watch: {},\n  created() {},\n  mounted() {\n    this.init()\n  },\n  methods: {\n    init() {\n      this.wavesurfer = WaveSurfer.create({\n        // container: this.$refs.waveform,//绑定容器，第一种方法\n        // container: document.querySelector('#waveform'),//第二种方法\n\t      container: '#waveform',//第三种方法\n        audioRate: this.speed, // 播放音频的速度。数字越低，速度越慢。\n        forceDecode: true, // 在缩放时使用web audio强制解码音频，以获得更详细的波形。\n        backgroundColor: '#2B3245', // 更改波形容器的背景颜色。\n        waveColor: '#368666', // 波纹颜色\n        progressColor: 'skyblue', // 播放波纹颜色\n        cursorColor: 'skyblue', // 播放进度线颜色\n        // backend: 'MediaElement', // WebAudio、MediaElement或MediaElementWebAudio。MediaElement是不受支持浏览器的后备方案。\n        barWidth: 3, // 控制波纹宽度\n        height: 80, // 波形的高度。以像素为单位测量。\n        plugins: [\n          Timeline.create({\n            container: '#timeline',//绑定容器\n            labelPadding: 2\n          }),\n          Region.create(),\n          Cursor.create({\n\t\t      \tshowTime: true,\n\t\t      \topacity: 1,\n\t\t      \tcustomShowTimeStyle: {\n\t\t      \t\t'background-color': '#000',\n\t\t      \t\tcolor: '#fff',\n\t\t      \t\tpadding: '2px',\n\t\t      \t\t'font-size': '10px'\n\t\t      \t}\n\t\t      })\n        ],\n      })\n\n      this.createRegion() // 创建音频选中区域\n      this.load() // 执行绑定事件\n\n    },\n    // 创建音频选中区域\n    createRegion(start, end) {\n      this.currentRegion = this.wavesurfer.addRegion({\n        // id: id, // region的id\n        start: start ? start : 2, // region的开始位置，单位秒\n        end: end ? end : 5, // region的结束位置，单位秒\n        loop: false, // 播放完毕后是否循环播放\n        // drag: false, // 是否支持拖拽\n        // resize: false, // 是否支持改变region的大小\n        color: \"rgba(254, 255, 255, 0.4)\", // \tregion的颜色\n        // dragSelection: {\n        //   slop: 5\n        // }\n      });\n    },\n    load() {\n      let _this =this\n      //加载音频\n      this.wavesurfer.load(\n        'http://10.1.138.24:9000/aishixun/20210811/11/744008024aff4235ae56c0702ac144ca.mp3'\n      )\n\n      // 加载时候\n      this.wavesurfer.on('loading', (percents) => {\n        // 当前加载的进度\n        console.log('当前加载的进度')\n        this.percent = percents;\n      })\n      // 加载成功\n      this.wavesurfer.on('ready', function() {\n        console.log('// 加载成功');\n        _this.totalTime = _this.changeTime(_this.wavesurfer.getDuration()); // 获取音频总时长\n      })\n      // 播放中\n      this.wavesurfer.on('audioprocess', function(e) {\n      \t_this.currentTime = _this.changeTime(_this.wavesurfer.getCurrentTime()) // 获取当前播放时间\n      })\n      // 结束播放\n      this.wavesurfer.on(\"finish\", () => {\n        // _this.wavesurfer.pause();\n      });\n\n      // 区域\n      this.wavesurfer.on('region-click', (region, mouseEvent)=> {\n        console.log('区域点击',region,mouseEvent);\n        const { start, end } = region;\n        _this.regionalTime = {\n          startTime: _this.changeTime(start),\n          endTime: _this.changeTime(end),\n        };\n      \t// region.play() // 播放当前区域，另一种播放方式： this.wavesurfer.play(start, end)\n        // let s = parseInt(region.start)\n        // let e = parseInt(region.end)\n        // _this.wavesurfer.play(s, e)\n      })\n      this.wavesurfer.on('region-created', (region)=> {\n        console.log('区域创建',region);\n      })\n\n      // 区域更新\n      this.wavesurfer.on('region-update', (region) => {\n        console.log('区域更新',region);\n      })\n      // 区域更新结束\n      this.wavesurfer.on('region-update-end', (region) => {\n        console.log('区域更新结束',region);\n        const { start, end } = region;\n        _this.regionalTime = {\n          startTime: _this.changeTime(start),\n          endTime: _this.changeTime(end),\n        };\n      \t/** 播放区域的两种方式 */\n      \t// this.wavesurfer.play(this.currentRegion.start, this.currentRegion.end)//①\n      \t// region.play();// ②\n          \n      \t/** 新增区域列表 */\n        //wavesurfer.regions.list:获取音频中的区域列表\n      \t_this.regionList = Object.values(_this.wavesurfer.regions.list);\n      })\n\n      \n    },\n\n    // 音量开关\n    onVolumeSwitch() {\n      this.volumeState = !this.volumeState\n      if (this.volumeState) {\n        this.wavesurfer.setVolume(this.volume/100) // 设置音量0-1，0：静音\n      } else {\n        this.wavesurfer.setVolume(0) // 设置音量0-1，0：静音\n      }\n    },\n    // 设置音量\n    volumeInput(val) {\n      this.wavesurfer.setVolume(val/100) // 设置音量0-1，0：静音\n    },\n\n    // 时间格式化 seconds/单位秒\n    changeTime(seconds) {\n    \tseconds = Number(seconds);\n      var hour = Math.floor(seconds / 60 / 60);\n      var minutes = Math.floor(seconds / 60) % 60\n        seconds = seconds % 60;\n    \tvar secondsStr = Math.round(seconds).toString()\n        secondsStr = seconds.toFixed(3);\n\n      let hh = hour > 0 ? (hour < 10 ? '0' + hour : hour) : '00';\n      let mm = minutes > 0 ? (minutes < 10 ? '0' + minutes : minutes) : '00';\n      let ss = seconds < 10 ? '0' + secondsStr : secondsStr;\n      \n      // console.log(hh, mm, ss)\n      \n      return `${hh}:${mm}:${ss}`\n\n    \t// if (minutes > 0) {\n    \t// \treturn `00:${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + secondsStr : secondsStr}`\n    \t// }\n    \t// return `00:00:${seconds < 10 ? '0' + secondsStr : secondsStr}`\n    },\n\n    // 输入时间片段失焦触发\n    inputBlur(state) {\n      let data = this.regionalTime;\n      // let reg = /^[0-9]\\d:[0-5]\\d+[\\.][0-9]{3}$/; // 判断字符串是否为时间格式： 00:00.000\n      let reg = /^(20|21|22|23|[0-1]\\d):[0-5]\\d:[0-5]\\d+[\\.][0-9]{3}$/; // 判断字符串是否为时间格式： 23:59:59.000\n      let flng = state === 'startBlur' ? reg.test(data.startTime) : reg.test(data.endTime)\n      console.log(flng)\n      if (flng) {\n        let starthh = data.startTime.split(':')[0] * 60 * 60,\n         startmm = data.startTime.split(':')[1] * 60,\n         startss = parseFloat(data.startTime.split(':')[2]);\n        let endhh = data.endTime.split(':')[0] * 60 * 60,\n         endmm = data.endTime.split(':')[1] * 60,\n         endss = parseFloat(data.endTime.split(':')[2]);\n\n        let start = starthh + startmm + startss\n        let end = endhh + endmm + endss\n        this.currentRegion.remove() // 删除原有区域\n        if (start > end) {\n          if (state === 'startBlur') {\n            this.regionalTime.endTime = this.changeTime(start)\n            this.createRegion(start, start) // 创建音频选中区域\n          } else {\n            this.regionalTime.startTime = this.changeTime(end)\n            this.createRegion(end, end) // 创建音频选中区域\n          }\n        } else {\n          this.createRegion(start, end) // 创建音频选中区域\n        }\n      } else {\n        this.$message.error('时间格式不正确，正确格式为：23:59:59.000')\n      }\n    },\n\n    // 重置选中音频片段时间\n    onResetTime() {\n      this.regionalTime = {\n        startTime: '00:00:02.000',\n        endTime: '00:00:05.000',\n      }\n      this.currentRegion.remove() // 删除原有区域\n      this.createRegion() // 创建音频选中区域\n    },\n\n    // 播放音频\n    play(){\n     this.wavesurfer.play()\n    },\n    // 暂停音频\n    pause(){\n     this.wavesurfer.pause()\n    },\n    // 停止音频回起点\n    stop(){\n     this.wavesurfer.stop()\n    },\n    // 试听选中音频片段\n    audition(){\n      let data = this.regionalTime;\n      let starthh = data.startTime.split(':')[0] * 60 * 60,\n       startmm = data.startTime.split(':')[1] * 60,\n       startss = parseFloat(data.startTime.split(':')[2]);\n      let endhh = data.endTime.split(':')[0] * 60 * 60,\n       endmm = data.endTime.split(':')[1] * 60,\n       endss = parseFloat(data.endTime.split(':')[2]);\n\n      let start = starthh + startmm + startss\n      let end = endhh + endmm + endss\n\n      this.currentRegion.remove() // 删除原有区域\n      this.createRegion(start, end) // 创建音频选中区域\n      this.currentRegion.play()\n    },\n    // 添加音频片段\n    add(){\n      this.dialogTitle = '添加音频片段'\n      if (this.regionalTime.endTime.indexOf('00:00.000') !== -1) {\n        return this.$message.error('请选择音频片段!')\n      }\n      this.form = {\n        id: '',\n        name: '',\n        startTime: '',\n        endTime: '',\n      },\n      this.dialogFormVisible = true\n    },\n    addRegional() {\n      if (this.form.name) {\n        if (this.dialogTitle === '添加音频片段') {\n          let timesId = new Date().getTime().toString();\n          let data = {}\n          data.id = timesId\n          data.name = this.form.name\n          data.startTime = this.regionalTime.startTime\n          data.endTime = this.regionalTime.endTime\n          this.tableData.push(data)\n        } else { // 编辑音频片段\n          this.tableData.map(item => {\n            if (item.id === this.form.id) {\n              item.name = this.form.name\n              // item.startTime = this.regionalTime.startTime\n              // item.endTime = this.regionalTime.endTime\n            }\n          });\n        }\n        this.dialogFormVisible = false\n      } else {\n        this.$message.error('名称不能为空!')\n      }\n    },\n\n    tableRowClassName({ row, rowIndex }) {\n    \tif (this.currentRegion.id === row.id) {//通过区域id来判断\n    \t\treturn 'success-row'\n    \t}\n    \treturn ''\n    },\n    // 列表试听\n    handleAudition(index, row) {\n      console.log(index, row);\n      let data = this.tableData[index];\n      // let start = data.startTime.split(':')[0] * 60 + parseFloat(data.startTime.split(':')[1])\n      // let end = data.endTime.split(':')[0] * 60 + parseFloat(data.endTime.split(':')[1])\n      let starthh = data.startTime.split(':')[0] * 60 * 60,\n       startmm = data.startTime.split(':')[1] * 60,\n       startss = parseFloat(data.startTime.split(':')[2]);\n      let endhh = data.endTime.split(':')[0] * 60 * 60,\n       endmm = data.endTime.split(':')[1] * 60,\n       endss = parseFloat(data.endTime.split(':')[2]);\n\n      let start = starthh + startmm + startss\n      let end = endhh + endmm + endss\n      this.currentRegion.remove() // 删除原有区域\n      this.createRegion(start, end) // 创建音频选中区域\n      this.currentRegion.play() // 播放区域音频\n    },\n    // 列表编辑\n    handleEdit(index, row) {\n      console.log(index, row);\n      this.dialogTitle = '编辑音频片段'\n      if (this.regionalTime.endTime.indexOf('00:00.000') !== -1) {\n        return this.$message.error('请选择音频片段!')\n      }\n      this.form = JSON.parse(JSON.stringify(row))\n      this.dialogFormVisible = true\n    },\n    // 列表删除\n    handleDelete(index, row) {\n      console.log(index, row);\n      this.tableData.splice(index, 1);\n    }\n  },\n  beforeMount() {},\n  updated() {},\n  beforeDestroy() {},\n  destroyed() {},\n}\n</script>\n<style lang=\"scss\" scoped>\n.audio-editor-container {\n  width: 100%;\n  height: 100%;\n  #waveform {\n    // background-color: #2B3245;\n    position: relative;\n  }\n\n  .el-table .success-row {\n    background: #d9e2f8;\n  }\n\n  /deep/.wavesurfer-region {\n    z-index: 3 !important;\n    // background: rgba($color: #000000, $alpha: 0.3) !important;\n  }\n\n  .button-all {\n    display: flex;\n    align-items: center;\n    margin: 10px 0;\n  }\n\n  .icon-outline {\n    // width: 20px;\n    // height: 20px;\n    font-size: 20px;\n    // padding: 15px;\n    margin: 0 10px;\n    position: relative;\n    cursor: pointer;\n    &:hover {\n      .block {\n        display: inline-block;\n      }\n    }\n    .block {\n      display: none;\n      position: absolute;\n      left: -5px;\n      top: -50px;\n      z-index: 9;\n      /deep/.el-slider__button {\n        width: 10px;\n        height: 10px;\n      }\n    }\n  }\n}\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./audioEditor.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./audioEditor.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./audioEditor.vue?vue&type=template&id=88ffcd22&scoped=true&\"\nimport script from \"./audioEditor.vue?vue&type=script&lang=js&\"\nexport * from \"./audioEditor.vue?vue&type=script&lang=js&\"\nimport style0 from \"./audioEditor.vue?vue&type=style&index=0&id=88ffcd22&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"88ffcd22\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}