Блог

Главная - Вопросы по программированию - Как приостановить или остановить аудиоэлемент HTML5 из component.ts

Как приостановить или остановить аудиоэлемент HTML5 из component.ts

#angular #typescript #html5-audio

#angular #typescript #html5-аудио

Вопрос:

Я хотел бы иметь возможность создать функцию для остановки или приостановки HTML-кода из моего файла component.ts. Я не вижу никаких встроенных методов для приостановки звука с помощью document.getelement 

 <audio controls id="audio-file" >
<source src="sample.wav" type="audio/wav">
</audio>
  
 import { Component, OnInit, Inject } from '@angular/core';
import { DOCUMENT } from "@angular/platform-browser";
import { WINDOW } from "../../services/window.service";

@Component({
  selector: 'app-audio',
  templateUrl: './audio.component.html',
  styleUrls: ['./audio.component.css']
})
export class AudioComponent implements OnInit {
  private audio = this.document.getElementById("audio-file")
  constructor(
    @Inject(DOCUMENT) private document: Document,
    @Inject(WINDOW) private window: Window
  ) { }
  ngOnInit() {
  }
stopAudio(){
  this.document.getElementById('audio-file')
}
}

Ответ №1:

Вызовите .pause() аудиоэлемент.

 stopAudio() {
  this.audio.pause();
}

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

Комментарии:

1. Проверьте метод, проверьте, private audio = this.document.getElementById("audio-file") правильно ли настроен элемент, возможно, вам нужно переместить его внутрь ngOnInit .

2. Спасибо! объявление private audio; вверху и установка его при инициализации on исправили мою проблему