gpt4 book ai didi

javascript - 如何使用音频文件中的振幅为图像大小制作动画?

转载 作者:行者123 更新时间:2023-12-03 01:33:38 25 4
gpt4 key购买 nike

我正在尝试在播放某些音频文件时使用一些音频文件的振幅来设置它们的大小。因此,当播放audio1时,image1必须根据audio1的幅度使用react。

我具有javascript,jquery和HTML的基本知识,但在这些 Realm 没有很强的技能。我试图找到一种使用音频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播放和分析音频的非常详细的教程。我自己没有尝试过,但是快速浏览一下代码就可以理解。

除此之外,还有一些其他链接可能会引导您前往某些方向:

  • Animate object by sound amplitude?
  • ^关于SO
  • 的类似问题
  • howlerjs.com
  • ^一个看似简单的声音播放API,尽管我认为它没有分析功能。
  • 关于javascript - 如何使用音频文件中的振幅为图像大小制作动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55450596/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com