console
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');
let playbackRateDom = document.querySelector("#playbackRateNumber");
let playbackRate = 1;
let duration1 = 4.8, duration2 = 6.9;
let node1 = editor.audio('https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/4201eh7nuhpephbozupq/creative-video-editor/test1.mp4', {
type: Editor.AUDIOEFFECT.FADE,
useEffect: true,//音频缓冲区内应开始播放的时间的偏移量,需要使用音效的初始化的需要置true
volume: 1,//音频的声音
// playbackRate,
});
node1.on('audioDecodeEnded', () => {
node1.playbackRate = playbackRate
})
node1.timelineStart(0);
node1.timelineStop(duration1 / playbackRate);
node1.setSourceOffset(0);
let node2 = editor.audio('https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/4201eh7nuhpephbozupq/creative-video-editor/test.mp4', {
type: Editor.AUDIOEFFECT.FADE,
useEffect: true,//音频缓冲区内应开始播放的时间的偏移量,需要使用音效的初始化的需要置true
volume: 1,//音频的声音
// playbackRate,
});
node2.on('audioDecodeEnded', () => {
node2.playbackRate = playbackRate
})
node2.timelineStart(duration1 / playbackRate);
node2.timelineStop(duration1 / playbackRate + duration2 / playbackRate);
node2.setSourceOffset(0);
// 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);
playbackRateDom.onchange = (e) => {
console.log(e, e.target.value)
editor.pause();
playbackRate = e.target.value;
node1.timelineStart(0);
node1.timelineStop(duration1 / playbackRate);
node1.setSourceOffset(0);
node1.playbackRate = playbackRate;
node2.timelineStart(duration1 / playbackRate);
node2.timelineStop(duration1 / playbackRate + duration2 / playbackRate);
node2.setSourceOffset(0);
node2.playbackRate = playbackRate;
editor.currentTime = 0;
}
InitVisualisations(editor, 'timeline-canvas', 'current')
<body>
<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="buttonBox">
<button id="mute">暂停</button>
<button id="play">play</button>
<input type="range" id="playbackRateNumber" max = 5.0 min =0.5 step="0.1" value = 1>
<button id="speed">playbackRate</button>
</div>
</div>