2017-04-26 53 views
0

下面是创建HTML 5音频元素的HTML内容:Angular2设置音频currentTime的组分

<audio id ="audio2"controls="controls" autoplay="false" (canplay)="CanPlay($event)"> 
      <source src="http://localhost:51657/Audio/1" type="audio/mp3"> 
</audio> 

下面是我正努力将当前时间一些默认值,注释的代码组件工作正常,但请建议如何做同样的事情Angular2的方式?

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; 
    } 
} 

回答

0

AudioComponent应与@Component({...})装饰不@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 { ... } 
+0

更新的组件的代码,问题是我怎么能代替评论jQuery的一部分与角一 – 001priyank