javascript - Kan ikke spille av lyd i React Typescript med play() funksjon | Feil: Egenskapen 'play' eksisterer ikke

Jeg har laget en enkel lydspiller i React js med Typescript, og jeg prøver å bruke de vanlige HTML5-funksjonene for å spille og pause lyden, men det fungerer ikke.

Når jeg gjør mytrack.play(); får jeg denne feilen: Property 'play' finnes ikke på typen 'HTMLElement'.

Her er koden min:

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

All hjelp ville bli virkelig satt pris på :) Mange takk

Med vennlig hilsen, Musayyab Naveed

Svar #1

Det er et par problemer her.

  1. Metoden play finnes på HTMLAudioElement og ikke på HTMLElement. getElementById returnerer HTMLElement | null, så du må kaste mytrack som HTMLAudioElement for at TypeScript skal tillate det.

Men det er ikke hovedproblemet.

  1. Det egentlige problemet er at koden din for å hente og spille av lydfilen kjører før koden (i render) som oppretter lydelementet. Hvis du ønsker å spille av lydfilen umiddelbart, prøv å inkludere autoplay-egenskapen på audio-elementet.

Svar #2

//file for export
export const AudioPlay = (file) => {
  new Audio(`/static/sounds/${file}`).play();    //under folder public
};

//file import
import {AudioPlay} from './comm';

//onClick event 
AudioPlay('stockin-ok.mp3');

Relaterte artikler