Creare waveform audio

**ninja72** · 26-05-2021, 15:28

Esistono molte librerie gratuite per il tuo scopo, ti mando le prime due che ho trovato.
Audiomotion-analyzer e Wavesurfer.

codice:

<!DOCTYPE html>
<html lang="it-IT">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            width: 300px;
            height: 65px;
        }

        .audioblock {
            width: 300px;
        }

        #waveform {
            width: 300px;
        }
    </style>
</head>

<body>

    <div class="audioblock">
        <div id="container"></div>
        <audio src="Alpha.mp3" id="audio" controls crossorigin></audio>
    </div>

    <div id="waveform"></div>
    <button id="playpause">Play / Pause</button>

    <script src="https://unpkg.com/wavesurfer.js/dist/wavesurfer.js"></script>
  
  <script type="module">
        // load module from Skypack CDN
        import AudioMotionAnalyzer from 'https://cdn.skypack.dev/audiomotion-analyzer?min'

        window.addEventListener('DOMContentLoaded', () => {
            // audio source
            const audioEl = document.getElementById('audio')

            // instantiate analyzer
            const audioMotion = new AudioMotionAnalyzer(
                document.getElementById('container'),
                {
                    source: audioEl,
                    height: window.innerHeight - 50,
                    mode: 5,
                    gradient: 'prism', //classic / prism / rainbow
                    lineWidth: 2,
                    fillAlpha: .5,
                    barSpace: .5,
                    showLeds: false
                }
            )

            // Init wavesurfer
            let wavesurfer = WaveSurfer.create({
                container: '#waveform',
                waveColor: '#A8DBA8',
                progressColor: '#3B8686',
                backend: 'MediaElement',
                barWidth: 2,
                barHeight: 1, // the height of the wave
                barGap: null
            });
            // error console
            wavesurfer.on('error', function (e) {
                console.warn(e);
            });
            // Load audio from URL
            wavesurfer.load('./Abba.mp3');
            // event button
            document.getElementById('playpause')
                .addEventListener('click', () => {
                    wavesurfer.playPause();
                })
        })

    </script>

</body>

</html>

**techno** · 27-05-2021, 00:53

Originariamente inviata da ninja72

Esistono molte librerie gratuite per il tuo scopo, ti mando le prime due che ho trovato.
Audiomotion-analyzer e Wavesurfer.

codice:

<!DOCTYPE html>
<html lang="it-IT">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            width: 300px;
            height: 65px;
        }

        .audioblock {
            width: 300px;
        }

        #waveform {
            width: 300px;
        }
    </style>
</head>

<body>

    <div class="audioblock">
        <div id="container"></div>
        <audio src="Alpha.mp3" id="audio" controls crossorigin></audio>
    </div>

    <div id="waveform"></div>
    <button id="playpause">Play / Pause</button>

    <script src="https://unpkg.com/wavesurfer.js/dist/wavesurfer.js"></script>
  
  <script type="module">
        // load module from Skypack CDN
        import AudioMotionAnalyzer from 'https://cdn.skypack.dev/audiomotion-analyzer?min'

        window.addEventListener('DOMContentLoaded', () => {
            // audio source
            const audioEl = document.getElementById('audio')

            // instantiate analyzer
            const audioMotion = new AudioMotionAnalyzer(
                document.getElementById('container'),
                {
                    source: audioEl,
                    height: window.innerHeight - 50,
                    mode: 5,
                    gradient: 'prism', //classic / prism / rainbow
                    lineWidth: 2,
                    fillAlpha: .5,
                    barSpace: .5,
                    showLeds: false
                }
            )

            // Init wavesurfer
            let wavesurfer = WaveSurfer.create({
                container: '#waveform',
                waveColor: '#A8DBA8',
                progressColor: '#3B8686',
                backend: 'MediaElement',
                barWidth: 2,
                barHeight: 1, // the height of the wave
                barGap: null
            });
            // error console
            wavesurfer.on('error', function (e) {
                console.warn(e);
            });
            // Load audio from URL
            wavesurfer.load('./Abba.mp3');
            // event button
            document.getElementById('playpause')
                .addEventListener('click', () => {
                    wavesurfer.playPause();
                })
        })

    </script>

</body>

</html>

Wavesurcer.Js lo uso gia da un po di yempo ma mi fa un waveform solo e siccome io ho una lista di audio vorrei che ogni audio visualizzasse il suo waveform

Discussione: Creare waveform audio

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Permessi di invio