我有一个可以在我的网页上播放的音频文件，但我想在播放音频时显示一种波形或条形。我不知道是否有一个带有 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 中显示波形。显示波形。
有没有办法用 CSS 或 Javascript/Jquery 做到这一点？您是否可以建议使用任何堵塞方法来做到这一点？
最佳答案
我使用库 ( 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>关于javascript - 如何使用 css 或 js 创建波形以显示音频文件何时播放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56096334/