Question

我已经用Typescript在React js中创建了一个简单的音频播放器，我试图使用普通的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>
    );
  }
}

任何帮助将不胜感激:) 非常感谢

最好的问候， Musayyab Naveed

Answer 1

这里有几个问题。

play方法位于HTMLAudioElement而非HTMLElement上。 getElementById返回HTMLElement | null，因此必须将mytrack强制转换为HTMLAudioElement，以便TypeScript允许它。

但这不是主要问题。

真正的问题是获取和播放音频文件的代码在创建音频元素的代码（在render中）之前运行。如果要立即播放音频文件，请尝试在autoplay元素上包含audio属性。

Answer 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');

使用play（）函数无法在React Typescript中播放音频|错误：属性“播放”不存在

2 个答案: