How to pause or stop an HTML5 Audio element from component.ts

Question

I'd like to be able to create a function to stop or pause an HTML from my component.ts file. I'm not seeing any built in methods to pause the audio using the 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')
}
}

arieljuod · Accepted Answer · 2019-04-08 04:08:19Z

2

Call .pause() on the audio element.

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

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

answered Apr 8, 2019 at 4:08

arieljuod

15.9k2 gold badges27 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

arieljuod Over a year ago

Inspect the method, check if private audio = this.document.getElementById("audio-file") is properly setting the element, maybe you need to move that inside ngOnInit.

andresmonc Over a year ago

thank you! declaring private audio; at the top and setting it in the on init fixed my issue

Collectives™ on Stack Overflow

How to pause or stop an HTML5 Audio element from component.ts

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related