Как я могу создать сигнал с помощью CSS или JS, чтобы показать, когда аудио файлы воспроизводятся - PullRequest
Новая
       46

Как я могу создать сигнал с помощью CSS или JS, чтобы показать, когда аудио файлы воспроизводятся

0 голосов
/ 12 мая 2019

У меня есть аудиофайл, который можно воспроизвести на моей веб-странице, но я хотел бы показать своего рода форму волны или полосы во время воспроизведения звука. Я не знаю, есть ли плагин с 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();
   }
 });

Что я хотел бы сделать, это отобразить формы волн внутри div с id. showWaveForms.

Есть ли способ сделать это с помощью CSS или Javascript / Jquery? Можете ли вы предложить что-нибудь сделать для этого?

1 Ответ

0 голосов
/ 12 мая 2019

Использую библиотеку (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>
...