Невозможно воспроизвести аудио в React Typescript с функцией play () |Ошибка: свойство 'play' не существует

Question

Я создал простой аудиоплеер в React js с Typescript, и я пытаюсь использовать обычные функции HTML5 для воспроизведения и приостановки звука, но он не работает.

Когда я делаю mytrack.play();, я получаю эту ошибку: Property 'play' does not exist on type 'HTMLElement'.

Вот мой код:

import React, { Component } from "react";
import "./SimplePlayer.css";
import styled from "styled-components";

export interface SimplePlayerProps {}

var mytrack = document.getElementById("mytrack");
console.log(mytrack);
mytrack.play();

export class SimplePlayer extends Component<SimplePlayerProps> {
  constructor(props: SimplePlayerProps) {
    super(props);
    console.log(this.props);
    this.state = {};
  }

  render() {
    return (
      <div id="wrapper">
        <audio id="mytrack" controls>
          <source src="audio.mp3" />
        </audio>
        <nav>
          <div id="defaultBar">
            <div id="progressBar" />
          </div>
          <div id="buttons">
            <button type="button" id="playButton" />
            <button type="button" id="muteButton" />
            <span id="currentTime">0:00</span>/
            <span id="fullDuration">0:00</span>
          </div>
        </nav>
      </div>
    );
  }
}

Любая помощь будет очень признательна :) Большое спасибо

С наилучшими пожеланиями, Мусайяб Навид

Answer 1

Здесь есть несколько проблем.

1. Метод play существует в HTMLAudioElement, а не HTMLElement. getElementById возвращает HTMLElement | null, поэтому вам нужно привести mytrack к HTMLAudioElement, чтобы TypeScript разрешил его.

Но это не главная проблема.

2. Реальная проблема заключается в том, что ваш код для получения и воспроизведения аудиофайла выполняется перед кодом (в render), который создает аудио элемент. Если вы хотите немедленно воспроизвести аудиофайл, попробуйте включить свойство autoplay в элемент audio.