0
504
VisualizaçõesCómo convertir mp3 a la imagen de onda de sonido usando javascript
Tengo un requisito en mi proyecto para convertir audio mp3 en una imagen que contenga las ondas para ese mp3. Algo como
¿Puedo hacer esto usando javascript (especialmente nodejs)? Por favor ayuda
3 Respostas
Responde à pergunta0
Aquí hay un breve programa de JavaScript que escribí. Cuando ingresa un archivo mp3, lo decodifica y muestra las amplitudes de la forma de onda en un lienzo. El lienzo se ve un poco aplastado para archivos más largos, pero eso podría cambiarse más tarde con css. Pruebe con un archivo más pequeño para obtener mejores resultados (como un archivo de audio de 5 a 10 segundos de duración).
Nota: Esto funciona en el navegador y no sé sobre Node. Esto utiliza las funciones integradas del navegador HTML Canvas Element y Web Audio API. Espero que Node tenga características comparables, o puede encontrar una biblioteca que cree un archivo de imagen con comandos similares a HTML Canvas 2d Context. ¡Buena suerte!
const margin = 10; const chunkSize = 50; const input = document.querySelector("input"); const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); const ac = new AudioContext(); const {width, height} = canvas; const centerHeight = Math.ceil(height / 2); const scaleFactor = (height - margin * 2) / 2; async function drawToCanvas() { const buffer = await input.files[0].arrayBuffer(); const audioBuffer = await ac.decodeAudioData(buffer); const float32Array = audioBuffer.getChannelData(0); const array = []; let i = 0; const length = float32Array.length; while (i < length) { array.push( float32Array.slice(i, i += chunkSize).reduce(function (total, value) { return Math.max(total, Math.abs(value)); }) ); } canvas.width = Math.ceil(float32Array.length / chunkSize + margin * 2); for (let index in array) { ctx.strokeStyle = "black"; ctx.beginPath(); ctx.moveTo(margin + Number(index), centerHeight - array[index] * scaleFactor); ctx.lineTo(margin + Number(index), centerHeight + array[index] * scaleFactor); ctx.stroke(); } } input.addEventListener("input", drawToCanvas); canvas { width: 90%; height: 400px; } <input type="file" accept="audio/mp3"> <br> <canvas height="1000"></canvas>0
Puede usar la biblioteca wavesurfer.js que crea ondas de todos los diferentes tipos de formatos de audio. Agregué un ejemplo con un archivo mp3 de cómo implementarlo con HTML y JS :
Si desea agregarlo con npm , consulte esta documentación: wavesurfer.js npm doc .
var wavesurfer = WaveSurfer.create({ container: '#waveform', waveColor: 'pink', progressColor: 'lightgreen' }); wavesurfer.load('https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3'); <div id="waveform"></div> <script src="https://unpkg.com/wavesurfer.js"></script>0
Verifique este paquete npm waveplayer .
Cargue un archivo de audio y reprodúzcalo
Cree una instancia de waveplayer.js y pase algunas opciones (opcionales):
import WavePlayer from 'waveplayer'; var wavePlayer = new WavePlayer({ container: '#waveform', barWidth: 4, barGap: 1, height: 128 });Cargue un archivo de audio desde una URL e inicie la reproducción cuando finalice la carga:
wavePlayer.load('url-to-some-audio-file.mp3') .then(() => waveplayer.play());