Below is the html content which creates HTML 5 audio element:
<audio id ="audio2"controls="controls" autoplay="false" (canplay)="CanPlay($event)">
<source src="http://localhost:51657/Audio/1" type="audio/mp3">
</audio>
Below is the component in which I am trying set the current time to some default value, the commented code is working fine, however please suggest how to do same thing the Angular2 way?.
import { OnInit, Output,Component, Injectable, EventEmitter } from '@angular/core';
declare let $: any;
@Component({
selector: 'audio-tag',
templateUrl: './audio-tag.component.html',
})
@Injectable()
export class AudioComponent implements OnInit {
@Output() canplay: EventEmitter<any> = new EventEmitter();
audio:any;
playBtn: any;
pauseBtn: any
currentTime:any;
timer:any;
duration:any;
sound: any;
ngOnInit(): void {
// $('#audio2').bind('canplay', function() {
// this.currentTime = 20;
// });
}
CanPlay(){
console.log('canplay');
this.currentTime=10;
this.audio.currentTime = 20;
}
}
AudioComponent should be decorated with @Component({...}) not @Injectable()
@Component({
selector: 'my-audio-player',
templateUrl: `
<audio id ="audio2"controls="controls" autoplay="false"
(canplay)="CanPlay($event)">
<source src="http://localhost:51657/Audio/1" type="audio/mp3">
</audio>
`
})
export class AudioComponent implements OnInit { ... }