如何使用音频文件放大来设置图像大小的动画？

Question

I am trying to animate some images'size with the amplitude of several audio files when they are playing. 我正在尝试使用几个音频文件的幅度在播放时为一些图像大小设置动画。 So when audio1 is playing, image1 has to react from the audio1 amplitude. 所以当audio1正在播放时，image1必须从audio1幅度做出反应。

I have basic knowledge in javascript, jquery and HTML but I don't have strong skills in these fields. 我有javascript，jquery和HTML的基本知识，但我在这些领域没有很强的技能。 I've tried to find a solution with audio API or p5.js but I don't know how to access to the amplitude audio parameters from my files. 我试图找到一个音频API或p5.js的解决方案，但我不知道如何从我的文件访问振幅音频参数。 I always find some complicated tutorial and I can't understand how to access audio in my HTML file with a simple way. 我总是找到一些复杂的教程，我无法理解如何以简单的方式访问我的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>

My questions are: What is the best way to access the amplitude parameter in order to change image size? 我的问题是：访问幅度参数以更改图像大小的最佳方法是什么？ is audio API the best way to acces amplitude or is there other way? 音频API是获取幅度的最佳方式还是其他方式？ I would like to arrive at something like: document.getElementById("#image1").style.height = 10*audio1.amplitude; 我想得到类似的东西：document.getElementById（“＃image1”）。style.height = 10 * audio1.amplitude;

Thank you for your help! 谢谢您的帮助！

Answer 1

This is what I found on that topic: https://dzone.com/articles/exploring-html5-web-audio 这是我在该主题上发现的： https ： //dzone.com/articles/exploring-html5-web-audio

It's basically a pretty detailed tutorial on playing and analyzing audio using JavaScript. 它基本上是一个非常详细的使用JavaScript播放和分析音频的教程。 I have not attempted this myself, but a quick glance on the code makes it seem understandable. 我自己没有尝试过，但快速浏览一下代码就可以理解了。

Other than that, a few other links that might lead you to some direction: 除此之外，还有一些其他链接可能会引导您朝某个方向发展：

Animate object by sound amplitude? 通过声音幅度动画对象？
^ Somewhat similar question on SO 在SO上有点类似的问题
howlerjs.com howlerjs.com
^ A seemingly easy API for sound playback, even though I don't think it's got analysing features. ^一个看似简单的声音播放API，即使我认为它没有分析功能。

如何使用音频文件放大来设置图像大小的动画？

问题描述

1 个解决方案

解决方案1
0 2019-04-02 12:24:04

如何使用音频文件放大来设置图像大小的动画？

问题描述

1 个解决方案

解决方案1 0 2019-04-02 12:24:04

解决方案1
0 2019-04-02 12:24:04