@ayden-fc2/riffle-bridge-web 1.0.2 → 1.0.4

package/README.md

@@ -2,7 +2,7 @@
 
 ## 1. tweaks和RiffleBridge用法总览
 
-本文档为Web应用提供Bridge使用指导，以连接外层native应用。分为必选的tweaks和可选的RiffleBridge两个API。
+本文档为当前Web应用提供Bridge使用指导，以连接外层native应用。分为必选的tweaks和可选的RiffleBridge两个API。
 
 **安装依赖：**
 ```bash
@@ -160,13 +160,14 @@ const tilt = bridge.utils.getTiltDirection(x, y);
 ```
 
 ### 3.3 音频模块（录音、播放）
+> 特别注意拿到的uri文件资源是webview外的native文件路径，当前webview无法直接播放音频，请参考录音模块代码，先调用readAsBase64转码再播放！
 
 **播放模块：**
 
 单例模式实现，主要用于不需要用户交互就直接播放的背景音乐等，点击音效等仍由web应用本身实现
 
 ```
-// 播放，支持传入 local://xxx 或 file://xxx 的本地路径，或 https://xxx 的url网址
+// 播放，支持传入 local://xxx 或 file://xxx 的native本地路径，或 https://xxx 的url网址
 await bridge.audio.playOnline({ uri: playUri });
 
 // 播放并循环（适用于背景音乐）
@@ -207,15 +208,27 @@ console.log('时长:', result.durationMillis / 1000, '秒');
 
 // 保存录音（以aydens-voice为例，实际可以替换为web应用的独特键，或者result.uri的独特文件名）
 if (result?.uri) {
+  // 保存文件到native应用并记录map
   await bridge.fileStorage.addCustomFileMapping('local://recording/aydens-voice', result.uri);
 }
 
-// 后续直接播放
+// 1. 后续让native层播放
 await bridge.audio.playOnline({ uri: 'local://recording/aydens-voice' });
+
+// 2. 后续直接让web播放
+const audioData = await bridge.fileStorage.readAsBase64(result.uri);
+const audio = new Audio(audioData.dataUrl);  // dataUrl 已是完整 'data:audio/mp4;base64,...'
+audio.play();
+
+// 或使用 React 方式
+<audio src={audioData.dataUrl} controls />
+
 ```
 
 ### 3.4 相机模块（实时相机、拍照、相册、闪光灯）
 
+>> 特别注意拿到的uri文件资源是webview外的native文件路径，当前webview无法直接渲染，请参考下方**拍照/相册**的代码，先调用readAsBase64转码再渲染！
+
 **实时相机**
 
 相机采用「透明 WebView + 原生相机层」实现，**打开相机时必须设置web应用背景透明**。
@@ -229,7 +242,9 @@ document.body.style.background = 'transparent';
 document.documentElement.style.background = 'transparent';
 document.getElementById('root')!.style.background = 'transparent';
 
-// 拍照
+// 拍照 
+// ⚠️ 拍照后不要直接渲染，参考下方**拍照/相册**的代码，先调用readAsBase64转码再渲染！
+// ⚠️ 拍照后如果需要保存，也参考下方**拍照/相册**的代码调用native的文件存储模块保存并记录map
 const photo = await bridge.camera.takePhoto();
 
 // 切换摄像头
@@ -277,13 +292,14 @@ await bridge.camera.setFilter('none');
 // 1. 拍照（以aydens-demo-photo为例，实际web应用使用picked.uri文件名或组特的key）
 const photo = await bridge.fileStorage.takePhoto();
 if (!photo?.cancelled) {
-  // photo.uri 是沙箱内的本地路径
+  // 保存文件到native应用并记录map
   await bridge.fileStorage.addCustomFileMapping('local://photos/aydens-demo-photo', photo.uri);
 }
 
 // 2. 或从相册选择（以aydens-photo为例，实际web应用使用picked.uri文件名或组特的key）
 const picked = await bridge.fileStorage.pickFromGallery();
 if (!picked?.cancelled) {
+  // 保存文件到native应用并记录map
   await bridge.fileStorage.addCustomFileMapping('local://photos/aydens-demo-photo', picked.uri);
 }
 
@@ -300,6 +316,7 @@ const base64 = await bridge.fileStorage.readAsBase64('local://photos/aydens-demo
 当应用需要闪光灯而不要实时相机时，可以使用非透明web应用背景来遮挡实时相机
 
 ### 3.5 文件存储模块
+>> 特别注意拿到的uri文件资源是webview外的native文件路径，当前webview无法直接渲染图片或播放音频，请参考下方代码，先调用readAsBase64转码再渲染或播放！相机&录音等模块也都有联动说明
 
 文件映射系统维护了一个MAP映射表，支持本地文件和网络资源两种存储，web应用要根据需求选择使用哪种
 
@@ -332,6 +349,11 @@ console.log(result.cached ? '使用缓存' : '已下载', result.uri);
 const base64 = await bridge.fileStorage.readAsBase64(url);
 ```
 
+**读取资源并解码base64，从native传入web**
+```
+// uri为mapRecord记录值
+const base64 = await bridge.fileStorage.readAsBase64(mapRecord);
+```
 
 
 ### 3.6 设备信息模块

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ayden-fc2/riffle-bridge-web",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Riffle Bridge Web SDK - WebView 与 Native 通信桥接库",
   "main": "dist/index.js",
   "module": "dist/index.mjs",