# Visualize Audio of a Confrence

**URL:** <https://openvidu.discourse.group/t/visualize-audio-of-a-confrence/2136>\
**Category:** How to implement?\
**Tags:** v2\
**Created:** [October 11, 2020, 5:39pm UTC](https://openvidu.discourse.group/t/visualize-audio-of-a-confrence/2136 "2020-10-11T17:39:08Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hasnain\_Hayder](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/hasnain_hayder/32/1038_2.png) [@Hasnain\_Hayder](https://openvidu.discourse.group/u/Hasnain_Hayder)\
**Post date:** [October 11, 2020, 5:39pm UTC](https://openvidu.discourse.group/t/visualize-audio-of-a-confrence/2136/1 "2020-10-11T17:39:08Z")

</div>

Hello,  
We are using OpenVIDU for our conferencing solution now we have a requirement where we would like to Visualize the audio receivied from peer in collective manner.  
Please let me know if there is any sample available for generating waveforms from openvidu stream.

---

<div class="post-metadata">

**Author:** ![mihailj](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/mihailj/32/406_2.png) [@mihailj](https://openvidu.discourse.group/u/mihailj)\
**Post date:** [October 14, 2020, 9:36am UTC](https://openvidu.discourse.group/t/visualize-audio-of-a-confrence/2136/2 "2020-10-14T09:36:21Z")

</div>

Hello,

You could use the [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API), using as sources the `<video>` elements created by OpenVidu. Then create an analyzer on the same `AudioContext` and draw the visualization on a `<canvas>`.

Good luck,  
Mihail

---

<div class="post-metadata">

**Author:** ![mihailj](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/mihailj/32/406_2.png) [@mihailj](https://openvidu.discourse.group/u/mihailj)\
**Post date:** [November 6, 2020, 11:48am UTC](https://openvidu.discourse.group/t/visualize-audio-of-a-confrence/2136/3 "2020-11-06T11:48:00Z")

</div>

Just found this really nice and comprehensive Web Audio API tutorial:

> **[Getting Audio Visualizations working with Web Audio API / Dwayne.xyz](https://dwayne.xyz/post/audio-visualizations-web-audio-api)**

---

<div class="post-metadata">

**Author:** ![Semmel](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/semmel/32/140_2.png) [@Semmel](https://openvidu.discourse.group/u/Semmel)\
**Post date:** [November 12, 2020, 4:12pm UTC](https://openvidu.discourse.group/t/visualize-audio-of-a-confrence/2136/4 "2020-11-12T16:12:08Z")

</div>

[http://kopiro.github.io/siriwave/](http://kopiro.github.io/siriwave/) is based on WebAudio and works fine in our project.

---

<div class="post-metadata">

**Author:** ![BAH\_Hady](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/bah_hady/32/1329_2.png) [@BAH\_Hady](https://openvidu.discourse.group/u/BAH_Hady)\
**Post date:** [February 2, 2021, 1:11pm UTC](https://openvidu.discourse.group/t/visualize-audio-of-a-confrence/2136/5 "2021-02-02T13:11:40Z")

</div>

hello , i have issue using as source the video elements created by openvidu. i don’t know which elements of openvidu i should pass on my audioSource to fetch the openvidu audio elements. i have this piece of code :

function () {  
var context = new AudioContext();  
var visCanvas = document.getElementById(‘visualizer’);  
var visualizer = new App.FrequencyVisualizer(context, visCanvas);  
var gain = 20; // Gain initial en pourcentage (max 100%)  
var audioSource = document.getElementsById(“local-video-undefined”);

```
            navigator.getUserMedia =
                    navigator.getUserMedia ||
                    navigator.webkitGetUserMedia ||
                    navigator.mozGetUserMedia ||
                    navigator.msGetUserMedia;

            if (navigator.getUserMedia) {
                navigator.getUserMedia(
                        {
                            audio: true,
                            video: false
                        },
                        function (stream) {

```

// audioSource = context.createMediaStreamSource(stream);  
// audioSource = audioSource(stream);  
visualizer.acceptConnection(audioSource);  
},  
function (err) {  
console.log('Error initializing user media stream: ’ + err);  
}  
);  
}

```
            // Visualisation du Gain
            visualizer.gain = gain;
            var gainDisplay = document.getElementById('gain-display');
            gainDisplay.textContent = gain + ' db';

        })();

```

Thank you