时间戳

首页 > 解决方案 > 如何使用音频文件中的 amplitute 为图像大小设置动画？

javascript - 如何使用音频文件中的 amplitute 为图像大小设置动画？

问题描述

我试图在播放时用几个音频文件的幅度来动画一些图像的大小。所以当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;

谢谢您的帮助！

标签： javascripthtmlaudioweb-audio-apijavascript-audio-api

解决方案

这是我在该主题上发现的： https ://dzone.com/articles/exploring-html5-web-audio

它基本上是一个关于使用 JavaScript 播放和分析音频的非常详细的教程。我自己没有尝试过，但是快速浏览一下代码就可以理解了。

除此之外，还有一些其他链接可能会引导您走向某个方向：

推荐阅读