如何使用 css 或 js 创建波形以显示音频文件何时播放答案

【问题标题】：How Can I Create a waveform with css or js to show when audio files is playing如何使用 css 或 js 创建波形以显示音频文件何时播放
【发布时间】：2019-05-12 04:56:49
【问题描述】：

我有一个可以在我的网页上播放的音频文件，但我想在播放音频时显示一种波形或条形图。我不知道是否有一个带有 javascript 的插件允许这样做，或者是否可以使用纯 css 来实现它。

我想做的是这样的：

Example Image

这是我的音频文件的代码：

<audio id="audio">
<source src="audio/audio1.mp3" type="audio/mpeg">
</audio>

<div id="showWaveForms"></div>

这是我播放音频的 jquery 代码：

 $(document).ready(function(){
   $("#start").click(StartGame);

   function StartGame() 
   {
    $("#audio")[0].play();
   }
 });

我想做的是在带有 id 的 div 中显示波浪形式。显示波形。

有没有办法用 CSS 或 Javascript/Jquery 做到这一点？有什么插件可以建议这样做吗？

【问题讨论】：

github.com/bbc/waveform-data.js

标签： javascript html css html5-audio waveform

【解决方案1】：

我使用库（wavesurfer.js）

/* In your JavaScript app, create a wavesurfer instance, passing the container selector along with some options: Go to The library and see more options 
*/

var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'violet',
    progressColor: 'purple'
});

/* Here upload your audio */

wavesurfer.load('audio1.mp3');

/* Here Play audio */

wavesurfer.on('ready', function () {
    wavesurfer.play();
});

<html>
    <head>
        <title>Wave audio</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
           <!-- This is Library CDN -->

        <script src="https://unpkg.com/wavesurfer.js"></script>

    </head>
    <body>
        
<div id="waveform"></div>

<script src="JS/Js.js" type="text/javascript"></script>
    </body>
</html>

【讨论】：

我可以使用这个库在四个不同的 div 中加载四个音频吗？
是的，你可以做到
但问题是当我在 4 个不同的 div 中加载四个音频时，仅在第一个 div 上显示波形，其他不显示波形