diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.css
new file mode 100644
index 00000000..cf377d64
--- /dev/null
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.css
@@ -0,0 +1,64 @@
+@keyframes normal {
+ 0%{
+ height: 20%;
+ }
+ 50%{
+ height: 40%;
+ }
+ 100%{
+ height: 20%;
+ }
+}
+@keyframes loud {
+ 0%{
+ height: 30%;
+ }
+ 50%{
+ height: 80%;
+
+ }
+ 100%{
+ height: 30%;
+ }
+}
+
+.audio-container{
+ background-color: var(--ov-tertiary-color);
+ padding: 5px;
+ max-width: 15px;
+ max-height: 15px;
+ height: 15px;
+ width: 15px;
+ border-radius: 50%;
+ display: flex;
+ justify-content: space-between;
+}
+
+.stick{
+ margin: auto;
+ height: 80%;
+ width: 3px;
+ background: var(--ov-light-color);
+ border-radius: 8px;
+}
+
+.pause {
+ animation-play-state:paused;
+ height: 1px;
+}
+
+.play {
+ animation-duration: 1.2s;
+ animation-timing-function: ease-in-out;
+ animation-iteration-count: infinite;
+ animation-play-state:running;
+}
+
+
+.normal{
+ animation-name: normal;
+}
+
+.loud{
+ animation-name: loud;
+}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.html
new file mode 100644
index 00000000..4e92fecb
--- /dev/null
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.html
@@ -0,0 +1,5 @@
+
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.spec.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.spec.ts
new file mode 100644
index 00000000..beca4764
--- /dev/null
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AudioWaveComponent } from './audio-wave.component';
+
+describe('AudioWaveComponent', () => {
+ let component: AudioWaveComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ AudioWaveComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(AudioWaveComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.ts
new file mode 100644
index 00000000..e129924d
--- /dev/null
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.ts
@@ -0,0 +1,41 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+import { PublisherSpeakingEvent, StreamManager } from 'openvidu-browser';
+
+@Component({
+ selector: 'ov-audio-wave',
+ templateUrl: './audio-wave.component.html',
+ styleUrls: ['./audio-wave.component.css']
+})
+export class AudioWaveComponent implements OnInit {
+ isSpeaking: boolean = false;
+ audioVolume: number = 0;
+
+ @Input()
+ set streamManager(streamManager: StreamManager) {
+ console.log('streamManager', streamManager);
+
+ if(streamManager) {
+ streamManager.on('publisherStartSpeaking', (event: PublisherSpeakingEvent) => {
+ this.isSpeaking = true;
+ });
+
+ streamManager.on('publisherStopSpeaking', (event: PublisherSpeakingEvent) => {
+ this.isSpeaking = false;
+ });
+
+ // streamManager.on('streamAudioVolumeChange', (event: any) => {
+ // // The loudest sounds on your system will be at 0dB
+ // // and silence in webaudio is -100dB.
+ // this.audioVolume = 100 + event.value.newValue;
+ // console.log('Publisher audio volume change from ' + event.value.oldValue + ' to' + event.value.newValue);
+ // console.log('AUDIO VOLUME', this.audioVolume);
+ // });
+ }
+
+ }
+
+ constructor() {}
+
+ ngOnInit(): void {}
+}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css
index 2ad707e5..359f99a4 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css
@@ -30,6 +30,13 @@
padding: 10px;
}
+ #audio-wave-container {
+ position: absolute;
+ right: 0;
+ z-index: 1;
+ padding: 5px;
+ }
+
.fullscreen {
top: 40px;
}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html
index 6bca2199..0dda7450 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html
@@ -31,9 +31,13 @@
+
+
+
+
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts
index 4c0dfecb..32e88978 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts
@@ -59,7 +59,7 @@ import { ParticipantsPanelComponent } from './components/panel/participants-pane
import { VideoconferenceComponent } from './components/videoconference/videoconference.component';
import { PanelComponent } from './components/panel/panel.component';
import { StreamDirective } from './directives/stream/stream.directive';
-import { BrowserModule } from '@angular/platform-browser';
+import { AudioWaveComponent } from './components/audio-wave/audio-wave.component';
@NgModule({
declarations: [
@@ -81,6 +81,7 @@ import { BrowserModule } from '@angular/platform-browser';
ParticipantItemComponent,
ParticipantsPanelComponent,
VideoconferenceComponent,
+ AudioWaveComponent,
PanelComponent,
],
imports: [
@@ -135,6 +136,7 @@ import { BrowserModule } from '@angular/platform-browser';
LayoutComponent,
StreamComponent,
VideoComponent,
+ AudioWaveComponent,
ParticipantConnectionsPipe,
CommonModule,
StreamDirective
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts b/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts
index 0a3505b0..0e86b561 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts
@@ -30,6 +30,7 @@ export * from './lib/components/session/session.component';
export * from './lib/components/layout/layout.component';
export * from './lib/components/stream/stream.component';
export * from './lib/components/video/video.component';
+export * from './lib/components/audio-wave/audio-wave.component';
// Models
export * from './lib/models/participant.model';