如何在本机反应中呈现html音频标签？

Posted 2023-03-24

【中文标题】如何在本机反应中呈现html音频标签？

【英文标题】：How to render html audio tag in react native?

【发布时间】：2021-12-22 02:55:50

【问题描述】：

为什么 react-native-html-render 不渲染 html 音频标签？这个库可以做到吗？由于有 iframe 插件来处理视频，感觉应该有一个插件来处理音频，但我找不到。提前致谢。

【问题讨论】：

试试这个库react-native-render-html

“感觉应该有” → 您可以随时在此处创建功能请求：native-html.canny.io/features！我想记住，“开源贡献者不欠你任何东西”。我希望看到社区开始制作一些插件！

【参考方案1】：

您还可以使用 expo-av 库在您的应用中播放音频 (https://docs.expo.dev/versions/latest/sdk/audio/)

import * as React from 'react';
import  Text, View, StyleSheet, Button  from 'react-native';
import  Audio  from 'expo-av';

export default function App() 
  const [sound, setSound] = React.useState();

  async function playSound() 
    console.log('Loading Sound');
    const  sound  = await Audio.Sound.createAsync(
       require('./assets/Hello.mp3')
    );
    setSound(sound);

    console.log('Playing Sound');
    await sound.playAsync(); 

  React.useEffect(() => 
    return sound
      ? () => 
          console.log('Unloading Sound');
          sound.unloadAsync(); 
      : undefined;
  , [sound]);

  return (
    <View style=styles.container>
      <Button title="Play Sound" onPress=playSound />
    </View>
  );