divclass="mixin-components-container">el-row>el-cardclass="box-card"style="text-align:left">divid="waveform"ref="waveform">div>..._vue wavesurfer分片渲染">
devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

在vue中使用音频wavesurfer.js较全解析_vue wavesurfer分片渲染

作者：Gausst松鼠会 | 2024-02-22 12:48:36

赞

踩

vue wavesurfer分片渲染

  1. npm install  wavesurfer.js
  2.  
  3. template>
  4.  
  5.   div class="container">
  6.  
  7.     div class="mixin-components-container">
  8.  
  9.       el-row>
  10.  
  11.         el-card class="box-card" style="text-align:left">
  12.  
  13.           div id="waveform" ref="waveform">
  14.  
  15.             
  16.  
  17.           div>
  18.  
  19.           div id="wave-timeline" ref="wave-timeline">
  20.  
  21.             
  22.  
  23.           div>
  24.  
  25.           div>
  26.  
  27.             el-button type="primary" @click="rew">后退el-button>
  28.  
  29.             el-button type="primary" @click="plays">
  30.  
  31.               i class="el-icon-video-play">i>
  32.  
  33.               播放
  34.  
  35.             el-button>
  36.  
  37.             el-button type="primary" @click="pause">
  38.  
  39.               i class="el-icon-video-pause">i> 暂停el-button
  40.  
  41.             >
  42.  
  43.             el-button type="primary" @click="speek">前进el-button>
  44.  
  45.             el-button type="primary" @click="replay">重放el-button>
  46.  
  47.             el-tooltip
  48.  
  49.               class="item"
  50.  
  51.               effect="dark"
  52.  
  53.               content="指定播放"
  54.  
  55.               placement="bottom"
  56.  
  57.             >
  58.  
  59.               el-popover placement="top" width="200" trigger="click">
  60.  
  61.                 el-input
  62.  
  63.                   v-model="appointTime"
  64.  
  65.                   placeholder="请输入内容"
  66.  
  67.                   class="input-with-select"
  68.  
  69.                 >
  70.  
  71.                   el-button slot="append" @click="appointPlay">播放el-button>
  72.  
  73.                 el-input>
  74.  
  75.                 el-button slot="reference" circle>
  76.  
  77.                   指定播放
  78.  
  79.                 el-button>
  80.  
  81.               el-popover>
  82.  
  83.             el-tooltip>
  84.  
  85.             span
  86.  
  87.               style="border: 2px solid #2f4f4f;margin-left: 8px;margin-right: 4px"
  88.  
  89.             />
  90.  
  91.             el-tooltip
  92.  
  93.               class="item"
  94.  
  95.               effect="dark"
  96.  
  97.               content="音量"
  98.  
  99.               placement="bottom"
  100.  
  101.             >
  102.  
  103.               el-popover
  104.  
  105.                 placement="top-start"
  106.  
  107.                 trigger="click"
  108.  
  109.                 style="min-width: 38px;margin-left: 10px"
  110.  
  111.               >
  112.  
  113.                 div class="block" style="width: 42px">
  114.  
  115.                   el-slider
  116.  
  117.                     v-model="value"
  118.  
  119.                     vertical
  120.  
  121.                     height="100px"
  122.  
  123.                     @change="setVolume"
  124.  
  125.                   />
  126.  
  127.                 div>
  128.  
  129.                 el-button slot="reference" circle>
  130.  
  131.                   音量
  132.  
  133.                 el-button>
  134.  
  135.               el-popover>
  136.  
  137.             el-tooltip>
  138.  
  139.             el-tooltip
  140.  
  141.               class="item"
  142.  
  143.               effect="dark"
  144.  
  145.               content="播放倍速"
  146.  
  147.               placement="bottom"
  148.  
  149.             >
  150.  
  151.               el-popover
  152.  
  153.                 placement="top"
  154.  
  155.                 width="220"
  156.  
  157.                 trigger="click"
  158.  
  159.                 style="margin-left: 10px"
  160.  
  161.               >
  162.  
  163.                 el-input-number
  164.  
  165.                   v-model="ds"
  166.  
  167.                   width="180"
  168.  
  169.                   :precision="2"
  170.  
  171.                   :step="0.1"
  172.  
  173.                   :min="0.5"
  174.  
  175.                   :max="2"
  176.  
  177.                   @change="DoubleSpeed"
  178.  
  179.                 />
  180.  
  181.                 el-button slot="reference" round>
  182.  
  183.                   {{ ds + " X" }}
  184.  
  185.                 el-button>
  186.  
  187.               el-popover>
  188.  
  189.             el-tooltip>
  190.  
  191.           div>
  192.  
  193.         el-card>
  194.  
  195.       el-row>
  196.  
  197.     div>
  198.  
  199.   div>
  200.  
  201. template>
  202.  
  203. script>
  204.  
  205. import WaveSurfer from "wavesurfer.js"; //导入wavesurfer.js
  206.  
  207. import Timeline from "wavesurfer.js/dist/plugin/wavesurfer.timeline.js"; //导入时间轴插件
  208.  
  209. import CursorPlugin from "wavesurfer.js/dist/plugin/wavesurfer.cursor.js";
  210.  
  211. import RegionsPlugin from "wavesurfer.js/dist/plugin/wavesurfer.regions.min.js";
  212.  
  213. export default {
  214.  
  215.   name,
  216.  
  217.   components: {},
  218.  
  219.   data() {
  220.  
  221.     // 这里存放数据
  222.  
  223.     return {
  224.  
  225.       wavesurfer: null,
  226.  
  227.       // 指定播放功能的播放时间点
  228.  
  229.       appointTime: 1,
  230.  
  231.       // 播放倍速
  232.  
  233.       ds: 1.0,
  234.  
  235.       // 设置音量
  236.  
  237.       value: 0,
  238.  
  239.     };
  240.  
  241.   },
  242.  
  243.   created() {},
  244.  
  245.   mounted() {
  246.  
  247.     this.$nextTick(() => {
  248.  
  249.       console.log(WaveSurfer);
  250.  
  251.       this.wavesurfer = WaveSurfer.create({
  252.  
  253.         // 应该在其中绘制波形的CSS选择器或HTML元素。这是唯一必需的参数。
  254.  
  255.         container: this.$refs.waveform,
  256.  
  257.         // 光标的填充颜色，指示播放头的位置。
  258.  
  259.         cursorColor: "red",
  260.  
  261.         // 更改波形容器的背景颜色。
  262.  
  263.         backgroundColor: "gray",
  264.  
  265.         // 光标后的波形填充颜色。
  266.  
  267.         waveColor: "violet",
  268.  
  269.         // 光标后面的波形部分的填充色。当progressColor和waveColor相同时，完全不渲染进度波
  270.  
  271.         progressColor: "purple",
  272.  
  273.         backend: "MediaElement",
  274.  
  275.         // 音频播放时间轴
  276.  
  277.         mediaControls: false,
  278.  
  279.         // 播放音频的速度
  280.  
  281.         audioRate: "1",
  282.  
  283.         // 插件：此教程配置了光标插件和时间轴插件
  284.  
  285.         plugins: [
  286.  
  287.           // 光标插件
  288.  
  289.           CursorPlugin.create({
  290.  
  291.             showTime: true,
  292.  
  293.             opacity: 1,
  294.  
  295.             customShowTimeStyle: {
  296.  
  297.               "background-color": "#000",
  298.  
  299.               color: "#fff",
  300.  
  301.               padding: "2px",
  302.  
  303.               "font-size": "10px",
  304.  
  305.             },
  306.  
  307.           }),
  308.  
  309.           RegionsPlugin.create(),
  310.  
  311.           // 时间轴插件
  312.  
  313.           Timeline.create({
  314.  
  315.             container: "#wave-timeline",
  316.  
  317.           }),
  318.  
  319.         ],
  320.  
  321.       });
  322.  
  323.       this.wavesurfer.on("error", function(e) {
  324.  
  325.         console.warn(e);
  326.  
  327.       });
  328.  
  329.       this.wavesurfer.on("interaction ", function(e) {
  330.  
  331.         console.warn(e);
  332.  
  333.       });
  334.  
  335.      // this.wavesurfer.addRegion({
  336.  
  337.         id: id,
  338.  
  339.         start: startime,
  340.  
  341.         end: "endtime",
  342.  
  343.         loop: false,
  344.  
  345.         drag: false,
  346.  
  347.         resize: false,
  348.  
  349.         color: "rgba(254, 255, 255, 0.4)",
  350.  
  351.       });
  352.  
  353.       //标注某个区域
  354.  
  355.       this.wavesurfer.addRegion({
  356.  
  357.         id: 1,
  358.  
  359.         start: "10",
  360.  
  361.         end: "20",
  362.  
  363.         loop: false,
  364.  
  365.         drag: false,
  366.  
  367.         resize: false,
  368.  
  369.         color: "rgba(254, 255, 255, 0.4)",
  370.  
  371.       });
  372.  
  373.       this.wavesurfer.addRegion({
  374.  
  375.         id: 2,
  376.  
  377.         start: "30",
  378.  
  379.         end: "60",
  380.  
  381.         loop: false,
  382.  
  383.         drag: false,
  384.  
  385.         resize: false,
  386.  
  387.         color: "rgba(253, 251, 25, 0.4)",
  388.  
  389.       });
  390.  
  391.       //总时常
  392.  
  393.       let duration = parseInt(this.wavesurfer.getDuration());
  394.  
  395.       console.log(duration);
  396.  
  397.       console.log(this.wavesurfer.getCurrentTime());
  398.  
  399.       this.wavesurfer.load(require("./../../assets/logo.mp3"));
  400.  
  401.       // this.value = this.wavesurfer.getVolume() * 100
  402.  
  403.     });
  404.  
  405.   },
  406.  
  407.   // 方法集合
  408.  
  409.   methods: {
  410.  
  411.     add() {
  412.  
  413.       this.$store.commit("addcount", 1);
  414.  
  415.     },
  416.  
  417.     del() {
  418.  
  419.       this.$store.commit("delcount", 1);
  420.  
  421.     },
  422.  
  423.     // 播放时暂停，播放时暂停
  424.  
  425.     plays() {
  426.  
  427.       this.wavesurfer.play();
  428.  
  429.     },
  430.  
  431.     //暂停
  432.  
  433.     pause() {
  434.  
  435.       this.wavesurfer.playPause();
  436.  
  437.     },
  438.  
  439.     //
  440.  
  441.     // 后退，
  442.  
  443.     rew() {
  444.  
  445.       this.wavesurfer.skip(-3);
  446.  
  447.     },
  448.  
  449.     // 前进，
  450.  
  451.     speek() {
  452.  
  453.       this.wavesurfer.skip(3);
  454.  
  455.     },
  456.  
  457.     // 重放
  458.  
  459.     replay() {
  460.  
  461.       this.wavesurfer.stop();
  462.  
  463.     },
  464.  
  465.     // 设置音量：
  466.  
  467.     setVolume(val) {
  468.  
  469.       this.wavesurfer.setVolume(val / 100);
  470.  
  471.     },
  472.  
  473.     // 指定播放
  474.  
  475.     appointPlay() {
  476.  
  477.       this.wavesurfer.play([this.appointTime]);
  478.  
  479.     },
  480.  
  481.     DoubleSpeed() {
  482.  
  483.       console.log("点击倍数加减触发");
  484.  
  485.     },
  486.  
  487.   },
  488.  
  489.   computed: {},
  490.  
  491.   watch: {},
  492.  
  493. };
  494.  
  495. script>
  496.  
  497. style scoped>
  498.  
  499. /* @import url(); 引入公共css类 */
  500.  
  501. .mixin-components-container {
  502.  
  503.   background-color: #f0f2f5;
  504.  
  505.   padding: 30px;
  506.  
  507.   min-height: calc(100vh - 84px);
  508.  
  509. }
  510.  
  511. style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/130175
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号