Expo AV React本地声音文件问题


我正在尝试使用React Native和Expo AV创建一个音频播放器。我可以(通过URI)播放在线远程文件,而且我的代码效果很好。但是,每当我尝试播放本地文件时,它都会引发错误:[Unhandled promise rejection: Error: Cannot load an AV asset from a null playback source]。我现在要处理的大部分音频处理代码都可以通过handleAudioPlayPause,按按钮按下。我该如何在没有问题的情况下播放该程序来播放本地文件?谢谢


const audio = {
  filename: 'Audio file 1',
  uri:
  require('../assets/sounds/hello.mp3'), //this does not work
    // 'https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3', // this works
};
  

...


const [isPlaying, setIsPlaying] = useState(false);
const [playbackObject, setPlaybackObject] = useState<any | null>(null);
const [playbackStatus, setPlaybackStatus] = useState<any | null>(null);
useEffect(() => {
    if (playbackObject === null) {
      setPlaybackObject(new Audio.Sound());
    }
  }, []);
   const handleAudioPlayPause = async () => {
    if (playbackObject !== null && playbackStatus === null) {
      const status = await playbackObject.loadAsync(
        { uri: audio.uri },
        { shouldPlay: true }
      );
      setIsPlaying(true);
      return setPlaybackStatus(status);
    }

    // It will pause our audio
    if (playbackStatus.isPlaying) {
      const status = await playbackObject.pauseAsync();
      setIsPlaying(false);
      return setPlaybackStatus(status);
    }

    // It will resume our audio
    if (!playbackStatus.isPlaying) {
      const status = await playbackObject.playAsync();
      console.log(status);
      setIsPlaying(true);
      return setPlaybackStatus(status);
    }
  };
  
  

查看加载音频文件的不同方法

  1. For remote Files use it as you were doing

const status = await playbackObject.loadAsync(
  { uri: audio.uri }, // For remote files we have to place uri like this
  { shouldPlay: true }
);
  
  1. But for local files, you have to use it like this,

const status = await playbackObject.loadAsync(
  audio.uri, // For local files we have to use it like this
  { shouldPlay: true }
);
  

在这里工作示例


Expo AV React本地声音文件问题的相关文章

  • [React] 核心属性refs—— 需要注意的问题

    官网链接 xff1a Refs and the DOM React 1 避免使用字符串的ref 什么是字符串的ref lt button ref 61 34 test 34 gt lt button gt ref所赋予的值是一个字符串 官方
  • react 的性能优化

    一 性能永远是第一需求 xff0c 时刻考虑性能问题 如何避免应用出现性能问题 xff0c 如下所示 xff1a 了解常见的性能问题场景时刻注意代码的潜在性能问题注重可重构的代码了解如何使用工具定位性能问题 二 网络性能优化 xff0c 自
  • React Props

    state 和 props 主要的区别在于 props 是不可变的 xff0c 而 state 可以根据与用户交互来改变 所以 xff0c 有些容器组件需要定义 state 来更新和修改数据 而子组件只能通过 props 来传递数据 pro
  • React Refs

    React 支持一种非常特殊的属性 Ref xff0c 可以用来绑定到 render 输出的任何组件上 这个特殊的属性允许引用 render 返回的相应的支撑实例 xff08 backing instance xff09 这样就可以确保在任
  • React Native重启APP

    有时会用到APP重启操作 xff0c 比如更新代码或者特殊情况的用户注销 0 62及以上版本 只重启JS部分 import DevSettings from 39 react native 39 DevSettings reload 详细请
  • 【瓣芽·Banya】React Native 构建的仿豆瓣应用

    今天介绍一个用 React Native 创建的应用 xff0c 集合了豆瓣电影 xff0c 图书等信息展示功能的 app github 地址 瓣芽 Banya 项目使用了react navigation 做路由 redux 做部分状态管理
  • React Native 选择器组件 / react-native-slidepicker

    react native slidepicker 一个纯 JavaScript 实现的的 React Native 组件 xff0c 用于如地址 xff0c 时间等分类数据选择的场景 github https github com lexg
  • React 项目部署后,页面404解决

    解决方法一 xff1a Nginx 配置 span class token punctuation span listen span class token number 80 span span class token punctuati
  • React + TS + Mobx 示例

    一 创建项目 方式一 xff1a create react app todo React ts demo scripts version 61 react scripts ts cd todo React ts demo npm start
  • webpack4+react+antd从零搭建React脚手架(四)-redux搭建

    redux 文档地址 redux是对数据的状态管理 xff0c 是react不可缺少的一部分 xff0c 具体的概念这里就不进行详细的介绍 本文主要是介绍怎么引入redux和使用redux 单向数据流 xff1a 从父组件流向子组件 xff
  • React中ref的使用方法和使用场景(详解)

    摘要 不管在Vue中还是React xff0c 如果我们想使用一个元素的DOM xff0c 不需要通过JS中操纵DOM的方法 xff0c 它们提供了一个专属的API就是ref 而Vue中的ref可能比较简单 xff0c 这一篇主要讲一下如何
  • 自定义组件继承的组件基类React.Component是什么

    我们平时写React组件时都要继承一个父类 xff0c 那就是React Component 也会用到props state和setState xff0c 我们只是会使用它 xff0c 然而不知道它们怎么来的 xff0c 既要知其然也要知其
  • 我应该在app.json文件中更改以从Expo重建我的应用程序?

    我打算重建我的应用程序 应该更改哪些设置以从1 0 0更改为1 1 0 我想知道重建程序和设置 在此处输入图像描述 我可以这样做吗 步骤1 更改app json 步骤2 EXPO构建 iOS code expo name my app ve
  • React Navigation 5 Hide Tab Bar来自堆栈导航器

    我想知道如何从嵌套在材料底部标签栏上的堆栈导航器内的特定屏幕上隐藏底部标签栏 这是我的堆栈导航器的代码 code import React from react import createStackNavigator from react
  • 从React App中的公共文件夹访问JSON

    我有一个JSON文件 我想将其内容用于我的React应用程序 这是我的代码的摘录 code export default class App extends Component constructor props super props t
  • React Native Cameraroll文件上传

    I am trying to build a custom image gallery that user can select multiple images from it and upload by FormData but on i
  • Expo av playbackObject's onPlaybackStatusUpdate is called only on play/stop instead of interval by progressUpdateIntervalMil

    OnPlayBackStatUsupdate应在每100ms后返回输出 但仅在播放或停止时返回 我是否缺少代码中的东西 我是博览会和博览会的新手 请参阅下面用于加载和播放音频文件的代码 code if sound loaded await
  • 使用React路由器编程导航

    和react router我可以使用Link元素可以创建由React路由器本地处理的链接 我在内部看到它this context transitionTo 我想进行导航 不是来自链接 而是来自下拉列表选择 例如 我该如何在代码中执行此操作
  • React-Native Reference to FlatList doesn't work

    我尝试在React Native应用程序中始终滚动到我的flatlist的底部 但不幸的是 我没有引用flatlist code lt View style styles viewPointOverview gt lt Text gt Po
  • Tailwind CSS无法与Vite React一起使用 - 安装React路由器后

    我已经完成了一些基本设置来测试React路由器 根据文档安装并配置了尾风 但这不起作用 我认为问题主要是在React路由器实施后引起的 请检查以下存储库中的代码 https github com amitmali reaeact route

随机推荐