Question

我有一个可以在网页上播放的音频文件，但是我想在播放音频时显示一种波形或条形图。我不知道是否有使用JavaScript的插件可以执行此操作，或者是否可以使用纯CSS实现此功能。

我想做的是这样的：

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

<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内的波形。 showWaveForms。

是否可以使用CSS或Javascript / Jquery做到这一点？您有建议使用的插头吗？

Answer 1

我使用库（waveurfer.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>

如何使用CSS或JS创建波形以显示何时播放音频文件

1 个答案: