h5 audio在react中的播放问题

最新推荐文章于 2024-08-08 08:11:45 发布
最新推荐文章于 2024-08-08 08:11:45 发布
阅读量1.1w 收藏 6
点赞数 2
分类专栏： 前端 WEB 文章标签： react audio source url ref
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29854831/article/details/79555400
版权
在React应用中，浏览器无法响应<audio>标签内<source>的src属性变化。为解决这个问题，可以创建一个自定义的Audio组件或者使用ref来直接操作audio对象。通过ref获取到audio元素后，动态改变其src属性，并处理显示和隐藏控制，确保音频播放正常。
摘要由CSDN通过智能技术生成
问题代码片段： 
                       <audio controls controlsList="nodownload" >
                            <source src={this.state.voiceURL} type="audio/ogg" />
                            <track kind="captions" />
                            您的浏览器不支持 audio 元素。
                        </audio>

问题描述：

原文链接：https://github.com/facebook/react/issues/9447

原文：The browser is not recognising any changes React makes to the 

最低0.47元/天 解锁文章
qq_29854831
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML5中的audio在react中的使用----语音播放进度条、倍速播放、下载等
weixin_30446197的博客
09-05 1751
最近做了一个将通话记录，语音转文字并可以在聊天记录里标注动机和摘要的需求，上图只是一个小小的模块，第一次接到使用到语音相关的需求，记录一下 上图是一个客服聊天记录的模块，语音转文字，将录音展示出来，可以音频播放，可以滑动进度条，倍速播放等等，以前自己心血来潮，使用原生js写过一个类似于网易音乐，播放音乐的播放器，包括进度条，音量调节啥的。当然做项目吗，还是...
react-audio-control:React组件提供了一个简单的音量滑块
03-30
React音频控制 一个React组件，提供了带有其他控件的音量滑杆 安装 npm install --save react-audio-control 用法 import React , { Component } from 'react' import { ReactAudioControl } from 'react-audio-control' import 'react-audio-control/dist/index.css' lass Example extends Component { const songTitle = 'Theme by TimMoor' const togglePlay = ( ) => { // setIsPlaying(!isPlaying) } const updateVolume = ( vol ) => {
使用splinter+requests批量下载微信公众号中的音频文件
Dexter's Laboratory
09-22 1732
需求分析 晚上老妈微信上给发了个豫剧公众号的链接,要我帮她下载到U盘上 打开看了下,页面还比较规矩,可以直接用CSS选择器晒出来列表链接地址,再进行遍历获取. 这里遇到一个小坑:公众号中内嵌音频文件不会直接在页面中加载<audio>标签，只有在点击播放按钮后才会出来，所以就不能直接解析HTML页面了，用splinter来操作Chrome模拟鼠标点击后再解析页面就可以咯。代码没几行，直接看注释就可以了。 环境依赖 Python 3.6+ requests splinter chromedrive
使用 `react-audio-player` 的指南
最新发布
gitblog_00149的博客
08-08 418
使用 react-audio-player 的指南 react-audio-playerA simple React wrapper on the HTML5 audio tag项目地址:https://gitcode.com/gh_mirrors/re/react-audio-player 1. 项目介绍 react-audio-player 是一个简洁且易于使用的React组件，用于在你的W...
react 项目 使用react-audio-player，避免chrome无法自动开启声音问题
山外小楼
09-27 4166
在做一些数据进行推送告警的时候，chrome浏览器安全限制会屏蔽声音响应，解决办法可以使用react-audio-player 插件 1.安装 npm install --save react-audio-player 2.使用 import ReactAudioPlayer from 'react-audio-player'; import sounds from '@/assets/audio/alarm.mp3' let audiosDom; //音频 const audioRef =..
react 页面渲染为空的情况
qq_39966730的博客
11-10 659
react 页面渲染为空的情况
解决浏览器无法自动播放audio的问题
大薄荷
08-24 4042
首先在PC端上，因为浏览器要求需要用户有点击的行为交互后，才可以触发语音和视频的播放，所以如果多个html之间需要自动触发audio的话，那么可以使用嵌套式的iframe，比如在父页面A中使用iframe，然后把若干个子页面的地址，通过js动态修改iframe的src，这样相当于只需要触发一次用户交互就可以了。 ...
react-h5-audio-player:用UIReact音频播放器组件。 它在台式机和移动设备上提供时间指示器
05-12
React H5音频播放器 音频播放器组件，可在不同的浏览器上提供一致的UI / UX。...import AudioPlayer from 'react-h5-audio-player' ; import 'react-h5-audio-player/lib/styles.css' ; // import 'react-h
react-music-player：React，TS的音乐播放插件，歌词同步功能，适配PC和移动端；一个带有React和Typescript的音乐播放器，可用于手机和PC
02-06
</ s> </ s> React很酷的音乐播放器 自适应音频播放组件，适用于PC和移动设备。 所有图标和文本都是可定制的。 主题颜色可以修改。 支持歌词的同步滚动。...封面图片在播放音乐时旋转，在音乐暂停时停止旋转。 显
react-player：一个React组件，用于播放各种URL，包括文件路径
02-05
一个React组件，用于播放各种URL，包括文件路径，Facebook，Twitch，SoundCloud，Streamable，Vimeo，Wistia，Mixcloud，DailyMotion和Kaltura。 不使用React吗？ 迁移到ReactPlayer v2.0 ReactPlayer v2.0更改了...
react + html 音频列表自动播放 + 顺序播放 + 列表播放完，自动停止 jq 通用
qq_41737172的博客
05-07 1205
react + html 音频自动播放 + 顺序播放 + 列表播放完，自动停止 jq 通用 class Narrate extends React.Component { public constructor(props) { super(props); Narrate.selfPlay = this.selfPlay.bind(this); this.playerOver = this.playerOver.bind(this); this.setAudio =
react中audio自定义样式
microarea的博客
03-28 1253
import React, { Component } from "react"; import "./pack.css"; class Audio extends Component { constructor(props) { super(props); this.state = { url: "https://music.163.com/song/media/outer/url?id=1349292048.mp3", //歌曲地址 curr...
audio播放录音
TyrionJ的博客
05-13 849
html5 audio是一个很强大的标签，项目中用到很多的就是直接给audio标签的src赋值音频文件对应的url，关于audio，网上资料很多，这里不详细介绍。本文主要讲述在项目中使用audio遇到的坑。项目前台使用vue框架1.如何将文件流转化成对应的url通过录音文件对应的uuid 获取录音对应的文件流data（bytes类型），使用let recordSrc = URL.createObj...
audio 获取时长方法 （react）
qq_37672347的博客
08-15 4049
方法一：创建audio标签，播放之后获取duration let audioE = document.createElement("audio"); // 获取时长 audioE.src = configUrl.photoUrl + res.key; audioE.load(); audioE.oncanplay = function () { setTimeout(()=> {...
【9】前端实习：react audio播放音乐组件（详细完整代码）
qq_40610760的博客
08-05 5768
详解： https://www.cnblogs.com/mybilibili/p/10376528.html import React, {Component} from 'react'; import {Form,Radio} from 'antd'; import {Link} from 'react-router-dom'; import STATIC from '....
Firefox关于Audio事件的bug及解决方案
zhu_free的博客
07-19 3730
在项目需求中，需要在播放器的进度条部分添加标签，标签按照时间节点分布，因此需要获取整个音频的时长audio.duration，在chrome中，可以给audio的canplay事件绑定函数获取时长，然后调用渲染标签的函数，但是在firefox中，以这种方式绑定的函数无法运行
Vue使用aplayer播放.wav格式音频不显示时长问题
灿灿大王搭建的黄金屋
12-02 2242
在弹窗中使用了aplayer播放器，但是发现.mp3格式音频显示和播放正常，.wav格式无法显示音频总时长，于是想到做以下改造： 1、由于在点击播放后，可以显示总时长，所以想到打开页面后，自动播放，先把时长展示出来： :autoplay="autoplay" 其中autoplay初始化为true 2、在打开弹窗后，使用ref绑定页面元素的办法，调用音频播放器的pause（暂停）方法，让自动播放的音频暂停播放，这样用户的体验就是打开音频可以显示时长，也没有自动播放了： ref="aplayer"
React中文教程：组件化开发与实践
事件处理在React中通常通过绑定函数来实现，而避免直接在JSX中使用原生DOM事件。 为了管理组件间的通信，React引入了数据流的概念，早期的Flux架构是一种单向数据流模式，而Redux则更进一步，提供了更强大的状态...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值