代码之家 › 专栏 › 技术社区 › Todd Matthews

反应-参考-音频播放-iOS上未处理的拒绝(NotSupportedError)

media reactjs

Todd Matthews · 技术社区 · 6 年前

我构建了一个react应用程序,可以在桌面web浏览器上播放/暂停当前选定的音频:

playPreview() {
    if (!this.state.isPlaying) {
      this.setState({ isPlaying: true });
      this.refs.audioRef.play();
    } else {
      this.setState({ isPlaying: false });
      this.refs.audioRef.pause();
    }
  }

在iOS移动浏览器(safari和chrome mobile)上,我收到一个未经处理的拒绝(不受支持的错误):该操作不受支持。

我知道,在iOS上,音频必须通过用户的手势播放,但我用一次单击来启动我的方法:

{!props.isPlaying 
  ? (<MdPlayCircleOutline className="play-btn" onClick={() => 
    props.playPreview()} />) 
  : (<MdPauseCircleOutline className="play-btn" onClick={() => 
    props.playPreview()} />)
}

我在父应用程序组件中有一个隐藏元素:

<audio ref="audioRef" src={this.state.currentSongUrl} style={{ display: 'none' }} />

所以我假设它不起作用,因为onClick不是直接的音频元素?如果是这样的话,我确信如何将这两个需求结合起来。

1-动态更改音频源 2-交替播放和暂停

提前感谢您的任何见解和帮助!

-托德

2 回复 | 直到 6 年前

Arslan Tariq 6 年前

这可能是因为您正在对ref使用不推荐的语法。您应该尝试以下操作:

<audio ref={(input) => {this.audioRef = input}} src={this.state.currentSongUrl} style={{ display: 'none' }} />

和

playPreview() {
  if (!this.state.isPlaying) {
    this.setState({ isPlaying: true });
    this.audioRef.play();
  } else {
    this.setState({ isPlaying: false });
    this.audioRef.pause();
  }
}

如需参考,请访问: Refs and the DOM

Born-kes 4 年前

我使用

import React from 'react'
import ReactPlayer from "react-audio-player";

let ref = null;
const stats = {play:false};

const Player = props => {
return (
    <div key={`props.id`}>
        <ReactPlayer
            src={`props.src`}
            ref={(el)=> {ref = el} }
            controls
        />
        <div onClick={()=>start()}>
            x
        </div>
    </div>
)
}
function start() {
    stats.play = !stats.play;
    console.log(stats, ref)

    if(stats.play){
        ref.audioEl.current.play()
    }else{
        ref.audioEl.current.pause()
    }
}

ReactDOM.render( <Player src="https://www.w3schools.com/html/horse.mp3" id="p1" /> , document.getElementById('root') );

推荐文章

Milan Bastola · 用css设计打印网站

6 年前

konsalex · Django Media,mp4服务

6 年前

Todd Matthews · 反应-参考-音频播放-iOS上未处理的拒绝(NotSupportedError)

6 年前

Mholmes85 · @媒体无法获取要堆叠的节

7 年前

Augusto Carmo · 锁定屏幕时,WebView媒体内容停止(调用活动的顶部)

7 年前

Tjemofej · 媒体阅读器。无法打开文件。(无此类文件或目录)

7 年前

BunniesRCool · 媒体文件看起来怎么样?(请先阅读)

7 年前

Muhammad Touseef · 将多个音频文件合并到一个文件中

7 年前

Artemy Kilin · Android MediaCodec似乎忽略了指定的KEY\u BIT\u RATE值

7 年前

krismath maasg · JavaFX MediaPlayer播放背景音乐,循环播放小型介绍音乐

8 年前