如何使用音頻文件放大來設置圖像大小的動畫？

Question

我正在嘗試使用幾個音頻文件的幅度在播放時為一些圖像大小設置動畫。 所以當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;

謝謝您的幫助！

Answer 1

這是我在該主題上發現的： https ： //dzone.com/articles/exploring-html5-web-audio

它基本上是一個非常詳細的使用JavaScript播放和分析音頻的教程。 我自己沒有嘗試過，但快速瀏覽一下代碼就可以理解了。

除此之外，還有一些其他鏈接可能會引導您朝某個方向發展：

通過聲音幅度動畫對象？
在SO上有點類似的問題
howlerjs.com
^一個看似簡單的聲音播放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