[英]How to use amplitute from audio file to animate an image size?
我正在尝试使用几个音频文件的幅度在播放时为一些图像大小设置动画。 所以当audio1正在播放时,image1必须从audio1幅度做出反应。
我有javascript,jquery和HTML的基本知识,但我在这些领域没有很强的技能。 我试图找到一个音频API或p5.js的解决方案,但我不知道如何从我的文件访问振幅音频参数。 我总是找到一些复杂的教程,我无法理解如何以简单的方式访问我的HTML文件中的音频。
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="images">
<img id="image1" src="../images/Image1.svg">
<img id="image2" src="../images/Image2.svg">
<img id="image3" src="../images/Image3.svg">
</div>
<audio id="audio1" controls>
<source src="../music/audio1.mp3" type="audio/mpeg">
</audio>
<audio id="audio2" controls>
<source src="../music/audio2.mp3" type="audio/mpeg">
</audio>
<audio id="audio3" controls>
<source src="../music/audio3.mp3" type="audio/mpeg">
</audio>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="../js/test_AudioVisualizer_02.js"></script>
</body>
</html>
我的问题是:访问幅度参数以更改图像大小的最佳方法是什么? 音频API是获取幅度的最佳方式还是其他方式? 我想得到类似的东西:document.getElementById(“#image1”)。style.height = 10 * audio1.amplitude;
谢谢您的帮助!
这是我在该主题上发现的: https : //dzone.com/articles/exploring-html5-web-audio
它基本上是一个非常详细的使用JavaScript播放和分析音频的教程。 我自己没有尝试过,但快速浏览一下代码就可以理解了。
除此之外,还有一些其他链接可能会引导您朝某个方向发展:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.