How to use amplitute from audio file to animate an image size?
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.
I have basic knowledge in javascript, jquery and HTML but I don't have strong skills in these fields. 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. I always find some complicated tutorial and I can't understand how to access audio in my HTML file with a simple way.
<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? I would like to arrive at something like: document.getElementById("#image1").style.height = 10*audio1.amplitude;
Thank you for your help!
1 answers
solution1
0 2019-04-02 12:24:04
This is what I found on that topic: https://dzone.com/articles/exploring-html5-web-audio
It's basically a pretty detailed tutorial on playing and analyzing audio using 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
- howlerjs.com
- ^ A seemingly easy API for sound playback, even though I don't think it's got analysing features.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.