javascript - 错误类型错误：无法读取未定义的属性“audioPlayer”

问题描述

我正在尝试使用文本创建音频同步。这就是我的想法，但后来我收到了这个错误“无法读取属性audioPlayer” undefined。我想知道如何让这个工作。

<audio #audiofile src="/assets/song/test2f.mp3" controls></audio><br>
    <div id="subtitles"></div>
    
    import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
    
    @Component({
      selector: 'app-starter',
      templateUrl: './starter.component.html',
      styleUrls: ['./starter.component.scss']
    })
    
    /**
     * Utility starter component
     */
    export class StarterComponent implements OnInit, AfterViewInit {
      // bread crumb items
      breadCrumbItems: Array<{}>;
    
      @ViewChild('audiofile') audioPlayer: ElementRef<HTMLAudioElement> ;
    
      constructor() {}
    
      ngOnInit() {
        this.breadCrumbItems = [{ label: 'Utility' }, { label: 'Starter Page', active: true }];
      }
    
      ngAfterViewInit() {
        console.log(this.audioPlayer.nativeElement);
        this.just_one();
      }
    
      just_one() {
    
        var subtitles = document.getElementById("subtitles");
        var syncData = [
          { "end": "0.2","start": "0.0","text": "I"},
          { "end": "0.7000000000000001","start": "0.2","text": "believe"},
          { "end": "0.9","start": "0.7000000000000001","text": "you're"},
          { "end": "1.2","start": "0.9","text": "just"},
          { "end": "1.4","start": "1.2","text": "talking"} ,
          { "end": "1.7000000000000002","start": "1.4","text": "nonsense"}                   
        ];
    
        console.log(syncData)
        createSubtitle();
    
        function createSubtitle()
          {
            var element;
            for (var i = 0; i < syncData.length; i++) {
              element = document.createElement('span');
              element.setAttribute("id", "c_" + i);
              element.innerText = syncData[i].text + " ";
              subtitles.appendChild(element);
            }
          }
    
        this.audioPlayer.nativeElement.addEventListener("timeupdate", function(e) {
          syncData.forEach(function(element, index, array) {
            var currTime = this.audioPlayer.nativeElement.currentTime;
            console.log(currTime)
          });
        });
      }
      
    }

标签： javascriptangulartypescript

javascript - 错误类型错误：无法读取未定义的属性“audioPlayer”

问题描述

解决方案

推荐阅读