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 clipTime = 10.0;
let playbackRate = 1.5;
let audio = editor.audio('https://sf6-cdn-tos.douyinstatic.com/obj/iesmusic-cn-local/v1/iesmsc-sg-local/v1/m/29cb000009625e4da94e', {
type: Editor.AUDIOEFFECT.NONE,
useEffect: true,//音频缓冲区内应开始播放的时间的偏移量,需要使用音效的初始化的需要置true
volume: 1,//音频的声音
playbackRate: 1,
});
audio.timelineStart(0);
audio.timelineStop(clipTime);
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.NONE,
useEffect: true,//音频缓冲区内应开始播放的时间的偏移量,需要使用音效的初始化的需要置true
volume: 1,//音频的声音
// playbackRate: 1.5,
});
audio1.on('audioDecodeEnded', () => {
audio1.playbackRate = playbackRate;
})
audio1.setSourceOffset(clipTime);
audio1.timelineStart(clipTime);
audio1.timelineStop(14.48);
audio1.on('audioDurationChange', (time) => {
let old = time * playbackRate;
audio1.setSourceOffset(clipTime / playbackRate);
audio1.timelineStop(clipTime + (old - clipTime) / playbackRate);
console.log(old, time, clipTime / playbackRate, clipTime + (old - clipTime) / playbackRate)
})
// 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')
<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="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>
<input type="range" id="playbackRateNumber" max = 5.0 min =0.5 step="0.1" value = 1.7>
<button id="speed">playbackRate</button>
</div>
</div>