javascript - Cannot Play Audio in React Typescript with play() function | Error: Property 'play' does not exist

admin管理员组

文章数量:1404938

I have created a simple Audio Player in React js with Typescript and I am trying to use the normal HTML5 functions to Play and Pause the Audio but it is not working.

When I do mytrack.play(); I get this error: Property 'play' does not exist on type 'HTMLElement'.

Here is my code:

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

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

I have created a simple Audio Player in React js with Typescript and I am trying to use the normal HTML5 functions to Play and Pause the Audio but it is not working.

When I do mytrack.play(); I get this error: Property 'play' does not exist on type 'HTMLElement'.

Here is my code:

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

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

Any Help would be really appreciated :) Many Thanks

Best Regards, Musayyab Naveed

• javascript
• reactjs
• typescript
• audio
• jsx

Share Improve this question Follow asked Mar 20, 2019 at 21:02 Musayyab NaveedMusayyab Naveed 36566 silver badges1515 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

There are a couple of issues here.

1. The play method exists on HTMLAudioElement and not HTMLElement. getElementById returns HTMLElement | null, so you'd have to cast mytrack as HTMLAudioElement for TypeScript to allow it.

But that's not the main problem.

2. The real issue is that your code to get and play the audio file is running before the code (in render) that creates the audio element. If you're wanting to play the audio file immediately, try including the autoplay property on the audio element.

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

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

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

本文标签：