SOURCE

    let canvas = document.getElementById('canvas');
    let editor = new Editor(canvas);
    let visualCanvas = document.querySelector('.visualizer');
    let delayTime = document.querySelector('#delayTime');
    let volume = document.querySelector('#volume');
    var imageNode = editor.image("https://tosv.byted.org/obj/eden-internal/uhyuhybd/video-editor-resource/assets/bg.jpg");
        imageNode.timelineStart(0);
        imageNode.timelineStop(5);
        imageNode.connect(editor.output);
    let audio = editor.audio('https://sf6-cdn-tos.douyinstatic.com/obj/iesmusic-cn-local/v1/iesmsc-sg-local/v1/m/29cb000009625e4da94e', {
      type: Editor.AUDIOEFFECT.FADE,
      useEffect: true,//音频缓冲区内应开始播放的时间的偏移量,需要使用音效的初始化的需要置true 
      volume: 1,//音频的声音
      visual: {
        type: 'frequencybars',
        show: true,
        canvas: visualCanvas
      }
    });
    audio.on('audioDecodeEnded', () => {
        audio.playbackRate = 1;
        console.log('audioDecodeEnded');
    })
    audio.timelineStart(0);
    audio.timelineStop(7.44);
    audio.setSourceOffset(0);

     let audio1 = editor.audio('https://sf6-cdn-tos.douyinstatic.com/obj/iesmusic-cn-local/v1/iesmsc-sg-local/v1/m/29cb000009625e4da94e', {
      type: Editor.AUDIOEFFECT.FADE,
      useEffect: true,//音频缓冲区内应开始播放的时间的偏移量,需要使用音效的初始化的需要置true 
      volume: 1,//音频的声音
    //   playbackRate: 1.5,
    });
    audio1.on('audioDecodeEnded', () => {
        audio1.playbackRate = 1.5;
        console.log('audioDecodeEnded');
    })
    if (audio1.audioBufferState === Editor.AUDIOSTATE.DECODEENDED) {
        audio1.playbackRate = 1.5;
    }
    audio1.setSourceOffset(7.44);
    audio1.timelineStart(7.44);
    audio1.timelineStop(14.48);

    editor.on('timeupdate',(time)=>{
        console.log(time);
    })
    editor.on('pause', () => {
        console.log('pause');
    })

    document.getElementById('speed').addEventListener('click', () => {
        audio.playbackRate = 2;
        editor.pause();
        // editor.pause();
        // audio.playbackRate = 2;
    }, false);

    document.getElementById('play').addEventListener('click', () => {
      editor.play();
    }, false);

    document.querySelector('#mute').addEventListener('click', () => {
      // editor.pause.bind(editor)();
      editor.pause();
    }, false);

    volume.onchange = (e) => {
      volume = document.querySelector('#volume');
      audio.volume = volume.value;
    }


    voiceProcess.onchange = (e) => {
      process = document.querySelector('#voiceProcess').value;
      audio.currentTime = Number(process)
    }

InitVisualisations(editor, 'timeline-canvas', 'current')

<div class="wrapper">
    <canvas width="640" height="360" id="canvas"></canvas>
    <canvas class="visualizer" width="640" height="100"></canvas>
    <p id="current">
    <p>
        <canvas id="timeline-canvas" width="640" height="20"></canvas>
    </p>
    <div class="voice">

      <label for="visual">音效可视化</label>

      <input type="radio" id="sinewave" name="visual" value="sinewave">
      <label for="sinewave">sinewave</label>

      <input type="radio" id="frequencybars" name="visual" value="frequencybars">
      <label for="frequencybars">frequencybars</label>

    </div>
    <div class="voice">
      <lable>延迟时间</lable>
      <input type="range" min="0" max="50" value="0" step="0.1" id="delayTime">
    </div>
    <div class="voice">
      <lable>音量</lable>
      <input type="range" min="0" max="10" value="0" step="1" id="volume">
    </div>
    <div class="voice">
      <lable>播放进度</lable>
      <input type="range" min="0" max="100" value="20" step="10" id="voiceProcess">
    </div>
    
    <div class="buttonBox">
        <button id="mute">暂停</button>

        <button id="play">play</button>

        <button id="speed">playbackRate</button>
    </div>
  </div>

 .wrapper {
      width: 100%;
    }

    canvas {
      width: 60%;
      border-top: 1px solid black;
      border-bottom: 1px solid black;
      margin-bottom: -3px;
      box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.7),
        0 3px 4px rgba(0, 0, 0, 0.7);
      margin: 1rem auto 0.5rem;
      display: block;
    }
    .buttonBox{
        width:80%;
        margin: 1rem auto 0.5rem;
       display: block;
    }

    button{
      background-color: #0088cc;
      background-image: linear-gradient(to bottom, #0088cc 0%, #0055cc 100%);
      text-shadow: 1px 1px 1px black;
      text-align: center;
      color: white;
      border: none;
      /* width: 10%; */
      width: max-content;
      font-size: 0.8rem;
      line-height: 1rem;
      padding: .5rem;
    }

    button:hover,
    button:focus,
    form a:hover,
    form a:focus {
      box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.7);
    }

    button:active,
    form a:active {
      box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.7);
    }

    .voice {
      width: 80%;
      margin: 1rem auto 0.5rem;
      display: block;
    }