最近给儿子做了一个看卡片的小程序,功能比较简单:
1、【后台】录入卡片书(名称、图片、英文名称),比如动物
2、【后台】在卡片书下面录入卡片(名称、图片、英文名称),比如猫、cat
3、【前台】卡片书列表
4、【前台】卡片书详情
其中,卡片书详情页面支持点击图片读取名称(或者英文名称)。这个功能我使用了百度提供的语音api接口,通过接口将中文、英文转换为mp3格式的流。文字和语音转换的工作都是后台完成的,这里不做多余的介绍,重点说下前端react-native播放mp3的实现。
使用到的组件:
react-native-audio-streaming
https://www.npmjs.com/package/react-native-audio-streaming
http://slides.com/jhabdas/streaming-audio-react-native/
js代码:
import {ReactNativeAudioStreaming, Player} from 'react-native-audio-streaming';
ReactNativeAudioStreaming.play(url, {});
其中,
- url是我动态生成的mp3的url地址,你可以替换成自己的mp3。
- 本地的mp3文件播放没涉及到,这个组件应该也是可以支持的。