醉美水芙蓉 发表于 2024-12-25 21:07:25

获取本地音频波形数据

<style>#papa { margin: 30px auto 0; padding: 10px; width: 800px; background: linear-gradient(to bottom right,#000,#ffc); box-shadow: 3px 6px 20px #000; border-radius: 6px; position: relative; }
#papa h2 { margin: 6px 0; color: snow; font: bold 1.6em sans-serif; text-align: center; text-shadow: 2px 2px 2px #000; }
#papa p { margin: 0; padding: 6px 0; }
#papa input { margin-right: 8px; border: 2px solid #ccc; border-radius: 6px; outline: none; background: none; color: snow; cursor: pointer; }
#papa input:hover { background: linear-gradient(tan,darkred); }
#papa input { display: none; }
#papa label { color: snow; }
#papa select { width: 40px; border-radius: 6px; border: 2px solid #ccc; outline: none; }
#mplayer { margin: auto; position: relative; width: 100%; height: 160px; bottom: 0; display: flex; justify-content: center; align-items: flex-end; }
#rec { margin: auto; width: 95%; height: 265px; display: block; padding: 6px; background: #efefef; color: #000; font-size: 14px; resize: none; outline: none; cursor: default; position: relative;}
#rec::-webkit-scrollbar { width: 8px; height: 4px; }
#rec::-webkit-scrollbar-thumb { border-radius: 6px; box-shadow: inset 0 0 5px rgba(0,0,0,.45); background: #fff; }
#rec::-webkit-scrollbar-track { border-radius: 6px; background: #959577; }
#selectSong { margin: 0 0 0 20px; cursor: pointer; }
#copytip { width: 550px; border: none; outline: none; background: none; color: tan; cursor: default; }
.mLine { position: relative; margin: 0 2px 0 0; width: 4px; height: 10px; background: gray linear-gradient(to top,lightgreen,green,lightgreen); }
.mLine::before, .mLine::after { position: absolute; content: ''; width: 100%; height: 3px; background: snow; top: 0; }
.mLine::after { top: 100%; }</style><div id="papa"><h2>获取音频波形数据</h2><p><input id="selectSong" type="button" value="选择音乐" /><input type="file" id="mfile" accept=".mp3, .ogg, .wav, .acc, .webm" /><input id="copy" type="button" value="复制" /><input id="copytip" type="text" value="" readonly="readonly" /><label for="selectVoice">频道: </label><select id="selectVoice"><option value="0"> 0 </option><option value="1"> 1 </option><option value="2"> 2 </option><option value="3"> 3 </option><option value="4"> 4 </option><option value="5"> 5 </option><option value="6"> 6 </option><option value="7"> 7 </option><option value="8"> 8 </option><option value="9"> 9 </option></select></p><p><textarea id="rec" placeholder="请选择本地音频 ..."></textarea></p><div id="mplayer"></div></div><audio id="aud"></audio><script>let total = Math.ceil(mplayer.offsetWidth / 6), idx = 0, voice= 0;

for(j=0; j<total; j++) {
        let el = document.createElement('span');
        el.className = 'mLine';
        mplayer.appendChild(el);
}

let Ac = new AudioContext;
let source = Ac.createMediaElementSource(aud);
let analyser = Ac.createAnalyser();
source.connect(analyser);
analyser.connect(Ac.destination);
let output = new Uint8Array(total);
let ypAr = [];
let lines = document.querySelectorAll('.mLine');

(function update() {
        analyser.getByteFrequencyData(output);
        let mid = total % 2 === 0 ? total / 2 - 1 : Math.floor(total / 2);
        for(j = 0; j < total ; j++) {
                let k = j <= mid ? (mid - j) * 2 : (j - mid) * 2 - 1;
                lines.style.height = output/2 + 'px';
        }
        window.requestAnimationFrame(update);
})();

aud.addEventListener('timeupdate', () => {
        ypAr.push(output);
        rec.value = 'ypData = [' + ypAr + '];';
        rec.scrollTop = rec.scrollHeight;
        idx ++;
});

aud.addEventListener('ended',() => {
        selectSong.disabled = selectVoice.disabled = false;
        copytip.value += ' [ ypData长度 :' + ypAr.length + ' / 音乐时长 : ' + aud.duration + ' ]';
});

copy.onclick = () => {
        rec.select();
        document.execCommand('copy');
        copytip.value = '内容已复制到剪切板';
        setTimeout("copytip.value=''",3000);
}

selectSong.onclick = () => {
        mfile.click();
        selectSong.disabled = selectVoice.disabled = true;
        ypAr.length = 0;
        rec.value = '';
}

mfile.onchange = () => {
        let filelist = mfile.files;
        if(filelist.length === 0) return;
        aud.src = URL.createObjectURL(filelist);
        aud.play();
        rec.placeholder = '音频数据待处理中 ...';
        copytip.value = '音频 : ' +filelist.name;
}

selectVoice.onchange = () => voice = selectVoice.value;</script>

klxf 发表于 2024-12-26 13:11:49

真漂亮！获得本地音频波形数据后怎么引用呢？

请醉美管理员作个解读与示范呗，谢谢:)

醉美水芙蓉 发表于 2024-12-27 11:35:23

klxf 发表于 2024-12-26 13:11
真漂亮！获得本地音频波形数据后怎么引用呢？

请醉美管理员作个解读与示范呗，谢谢 ...

这个对你来说小意思了，你看看就会了！

klxf 发表于 2024-12-27 17:14:07

醉美水芙蓉 发表于 2024-12-27 11:35
这个对你来说小意思了，你看看就会了！

不太熟悉，先学习一下

醉美水芙蓉 发表于 2024-12-27 19:58:57

klxf 发表于 2024-12-27 17:14
不太熟悉，先学习一下

音乐放进去屏谱就出来了！

klxf 发表于 2024-12-27 22:26:19

醉美水芙蓉 发表于 2024-12-27 19:58
音乐放进去屏谱就出来了！

屏谱出来以后，这些屏谱代码如何加入整个帖子代码里呢？
页: [1]
查看完整版本: 获取本地音频波形数据