console
canvas = document.getElementById('canvas');
editor = new Editor(canvas);
musicNode = editor.audio('https://sf6-cdn-tos.douyinstatic.com/obj/tos-cn-ve-2774/64b5a4609eb843c29c974d39d4d5d058', {
type: Editor.AUDIOEFFECT.FADE,
playbackRateType:'wasm',
useEffect: true,
volume: 1,
});
musicNode.timelineStart(0);
musicNode.timelineStop(24);
musicNode.fade = {
inTime: 0,
outTime: 0,
};
changePlaybackRate = document.getElementById('changePlaybackRate');
changePlaybackRate.onclick = () => {
musicNode.playbackRate = 2;
}
musicNode.connect(editor.output);
let wrapper = document.getElementById('wrapper');
let interactiveBox = editor.initInteractiveBox(wrapper);
InitVisualisations(editor, 'timeline-canvas', 'current')
let graphCanvas = document.getElementById('graph');
Editor.utils.visualiseVideoContextGraph(editor, graphCanvas);
playButton.onclick = editor.play.bind(editor);
pauseButton.onclick = editor.pause.bind(editor);
InitVisualisations(editor, 'timeline-canvas', 'current')
<body>
<div class="wrapper" id="wrapper">
<canvas width="640" height="360" id="canvas"></canvas>
</div>
<p>
<button id="playButton">play</button>
<button id="pauseButton">pause</button>
<button id="changePlaybackRate">倍速</button>
</p>
<p id="current">
</p>
<p>
<canvas id="timeline-canvas" width="640" height="20"></canvas>
</p>
<p>
<canvas id="graph" width="640" height="320"></canvas>
</p>
</body>