React-native Android 添加音效

文章背景

客户提出需求: 2.PDA提示操作:正常和异常的提示需要更明显的区别(确认错误是否有语或其他提示)
**使用的技术:**使用React-Native 做的Android开发。

实现方法

在React Native中,如果你想要在Android应用中添加声音提示,你可以使用Sound组件。以下是一个简单的例子,演示如何在React Native应用中播放声音提示:

  1. 首先下载音效文件
    音频下载我是在 制片帮素材 免费下载的(需要登录)

并且该文件需要被添加到了项目的\android\app\src\main\res\raw

在这里插入图片描述

  1. 接下来,你需要安装react-native-sound库:
npm install react-native-sound --save
  1. 最后,你可以在你的React Native组件中使用Sound来播放声音:
import React, { Component } from 'react';
import { Button } from 'react-native';
import Sound from 'react-native-sound';//1.导入包
 
class SoundExample extends Component {
									//2.创建方法
  playSound = () => {
    // 需要提前将音频文件添加到项目中
    const sound = new Sound('error_sound.mp3', Sound.MAIN_BUNDLE, (error) => {
      if (error) {
        console.log('加载音频文件出错:', error);
      } else {
        sound.play((success) => {
          if (success) {
            console.log('成功播放音频');
          } else {
            console.log('播放音频失败');
          }
        });
      }
    });
  }
 
  render() {
    return (
      <Button title="播放声音" onPress={this.playSound} />//3.使用
    );
  }
}
 
export default SoundExample;

此时点击按钮就可以听到声音了

相关推荐

  1. 07 React 添加列表

    2024-07-13 16:52:05       31 阅读
  2. Python 音频添加水印

    2024-07-13 16:52:05       43 阅读
  3. React中如何动态添加和删除元素

    2024-07-13 16:52:05       53 阅读
  4. react根据后端返回数据动态添加路由

    2024-07-13 16:52:05       24 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-13 16:52:05       70 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-13 16:52:05       74 阅读
  3. 在Django里面运行非项目文件

    2024-07-13 16:52:05       62 阅读
  4. Python语言-面向对象

    2024-07-13 16:52:05       72 阅读

热门阅读

  1. QT的语法(自我总结版本)

    2024-07-13 16:52:05       23 阅读
  2. React有哪些应用场景

    2024-07-13 16:52:05       23 阅读
  3. 设计模式——多例模式(23种之外)

    2024-07-13 16:52:05       25 阅读
  4. Redis 中的跳跃表(Skiplist)基本介绍

    2024-07-13 16:52:05       22 阅读
  5. python的面向对象编程

    2024-07-13 16:52:05       22 阅读
  6. 单元测试有什么好处呢?

    2024-07-13 16:52:05       22 阅读
  7. Git使用介绍教程

    2024-07-13 16:52:05       20 阅读