多个音频轨道合并成一个

AudioContext 文档

一、音频 tracks 合并

const audioContext = new AudioContext()
const dest = audioContext.createMediaStreamDestination()// 多个tracks 创建 多个 streamconst tracksList = [tracks, tracks, tracks]tracksList.forEach((tracks) => {const stream= new MediaStream()stream.addTrack(tracks)// 轨道合并到 destaudioContext.createMediaStreamSource(stream).connect(dest)
})// 输出合并完成的 tracksconsole.log('tracks',  dest.stream.getTracks()[0])

二、录制屏幕保持到本地

   步骤解析

• 获取屏幕 stream，选择整个屏幕录制，“ stream没有浏览器内的声音 ”
• 获取 audio 标签的 stream 的 轨道 加入到 屏幕 stream
• 使用 MediaRecorder 开始录制

/ 共享屏幕 获取屏幕 stream* video 屏幕画面* audio 麦克风声音 （没有麦克风也不会导致失败）* */navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }).then(success, error);const success = (stream) => {// 先声明 一个 屏幕的轨道，后面用于监听关闭共享屏幕const  screenTracks = stream.getTracks()[0]// 获取浏览器标签的声音 (如果不需要可以不使用)const audioEl = document.getElementById('audio标签')if (!audioEl) returnconst audiotracksList = audioEl.captureStream().getTracks()if (audiotracksList.length) {// stream 加入 标签轨道audiotracksList.forEach((tracks) => {stream.addTrack(tracks)})}// 录制并且保存至本地文件var mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ?"video/webm; codecs=vp9" :"video/webm";var mediaRecorder = new MediaRecorder(stream, {mimeType: mime});var chunks = [];mediaRecorder.addEventListener('dataavailable', function(e) {chunks.push(e.data)})//停止mediaRecorder.addEventListener('stop', function(){var blob = new Blob(chunks, {type: chunks[0].type});var url = URL.createObjectURL(blob);var a = document.createElement('a');a.href = url;// 保存的文件和文件后缀a.download = 'video.mp4';a.click();})//手动启动mediaRecorder.start(1000)// 监听用户是否点击了，系统的关闭共享screenTracks.addEventListener("ended", () => {// 关闭录制mediaRecorder.stop()});// 十秒关闭录制setTimeout(() => {// 关闭录制mediaRecorder.stop()}, 10000)}const error = (err) => {console.log(`获取失败: ${err}`)}

三、其他内容

        1、获取标签内的 所有 指定标签

      const canvasBox = document.getElementById('标签')const dataList = canvasBox.getElementsByTagName('指定标签')// 如果需要循环dataList，使用 for 不要使用 forEach