Question

以下是创建HTML 5音频元素的html内容：

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

Answer 1

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 { ... }

Angular2在组件中设置音频currentTime

1 个答案: