概述
App Inventor 2的 Sound 和 Player 组件可以播放音频,但它们主要支持本地文件。要播放远程/网络音频,需要不同的方案:
| 方案 | 组件 | 支持格式 | 适用场景 |
|---|---|---|---|
| Player组件 | Player | MP3/WAV/OGG | 本地+简单网络音频 |
| WebView | WebView | 所有HTML5音频 | 网络流媒体 |
| Sound组件 | Sound | 短音频 | 音效、提示音 |
| 扩展 | AudioExtension | 更多格式 | 高级需求 |
Player组件
核心属性和方法
| 方法/属性 | 说明 |
|---|---|
| Source | 音频文件路径 |
| Play() | 播放 |
| Pause() | 暂停 |
| Stop() | 停止 |
| Vibrate(ms) | 震动 |
| IsPlaying | 是否正在播放 |
| Volume | 音量(0-100) |
| Loop | 是否循环播放 |
播放本地音频
当 Screen1.初始化
设 Player1.源 = "background_music.mp3"
设 Player1.循环 = true
调用 Player1.播放()
播放网络音频
Player组件支持直接播放网络URL:
当 按钮_播放网络音乐.被点击
设 Player1.源 = "https://example.com/music/song.mp3"
调用 Player1.播放()
当 按钮_暂停.被点击
调用 Player1.暂停()
当 按钮_停止.被点击
调用 Player1.停止()
Player事件
| 事件 | 说明 |
|---|---|
| Completed() | 播放完成 |
| OtherPlayerStarted() | 其他Player开始播放 |
当 Player1.播放完成()
标签_状态.文本 = "播放完毕"
' 自动播放下一首
设 当前索引 = 当前索引 + 1
如果 当前索引 ≤ 列表长度(播放列表)
设 Player1.源 = 列表第当前索引项(播放列表)
调用 Player1.播放()
音量控制
当 滑动条_音量.位置改变(位置)
设 Player1.音量 = 位置 ' 0-100
当 按钮_静音.被点击
设 Player1.音量 = 0
当 按钮_最大音量.被点击
设 Player1.音量 = 100
WebView播放网络音频
对于Player不支持的格式或流媒体,使用WebView:
HTML文件(audio_player.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { margin: 0; background: #1a1a2e; color: #eee; font-family: sans-serif; }
.player { padding: 20px; text-align: center; }
.title { font-size: 18px; margin-bottom: 10px; }
audio { width: 100%; max-width: 400px; }
.controls { margin-top: 15px; }
button {
background: #4CAF50; color: white; border: none;
padding: 10px 20px; margin: 5px; border-radius: 25px;
font-size: 14px; cursor: pointer;
}
button:active { background: #388E3C; }
#status { margin-top: 10px; font-size: 14px; color: #aaa; }
</style>
</head>
<body>
<div class="player">
<div class="title" id="songTitle">等待播放...</div>
<audio id="audio" controls></audio>
<div id="status"></div>
</div>
<script>
var audio = document.getElementById('audio');
setInterval(function() {
var msg = window.AppInventor.getWebViewString();
if (msg && msg !== "") {
try {
var cmd = JSON.parse(msg);
if (cmd.action === "play") {
audio.src = cmd.url;
audio.play();
document.getElementById('songTitle').textContent = cmd.title || cmd.url;
window.AppInventor.setWebViewString("STATUS:playing");
} else if (cmd.action === "pause") {
audio.pause();
window.AppInventor.setWebViewString("STATUS:paused");
} else if (cmd.action === "stop") {
audio.pause();
audio.currentTime = 0;
window.AppInventor.setWebViewString("STATUS:stopped");
} else if (cmd.action === "seek") {
audio.currentTime = cmd.position;
} else if (cmd.action === "volume") {
audio.volume = cmd.volume; // 0.0 - 1.0
}
} catch(e) {}
window.AppInventor.setWebViewString("");
}
}, 100);
audio.onended = function() {
window.AppInventor.setWebViewString("STATUS:completed");
};
audio.ontimeupdate = function() {
// 减少通信频率
};
</script>
</body>
</html>
App Inventor积木块
当 Screen1.初始化
设 WebView1.主页地址 = "file:///android_asset/audio_player.html"
当 按钮_播放.被点击
设 命令 = "{""action"":""play"",""url"":""" & 输入框_URL.文本 & """,""title"":""我的音乐""}"
设 WebView1.WebView字符串 = 命令
当 按钮_暂停.被点击
设 WebView1.WebView字符串 = "{""action"":""pause""}"
当 按钮_停止.被点击
设 WebView1.WebView字符串 = "{""action"":""stop""}"
当 WebView1.WebView字符串改变(值)
如果 值 以 "STATUS:" 开头
设 状态 = 替换文本(值, "STATUS:", "")
如果 状态 = "completed"
标签_状态.文本 = "播放完毕"
否则 如果 状态 = "playing"
标签_状态.文本 = "正在播放..."
实战案例:网络音乐播放器
功能
- 从URL播放网络音乐
- 播放列表管理
- 上一首/下一首
- 音量控制
设 播放列表 = [
{title: "歌曲1", url: "https://example.com/song1.mp3"},
{title: "歌曲2", url: "https://example.com/song2.mp3"},
{title: "歌曲3", url: "https://example.com/song3.mp3"}
]
设 当前索引 = 1
当 按钮_上一首.被点击
如果 当前索引 > 1
设 当前索引 = 当前索引 - 1
调用 播放当前()
当 按钮_下一首.被点击
如果 当前索引 < 列表长度(播放列表)
设 当前索引 = 当前索引 + 1
调用 播放当前()
定义 播放当前()
设 歌曲 = 列表第当前索引项(播放列表)
设 标题 = 从字典 歌曲 获取 "title"
设 URL = 从字典 歌曲 获取 "url"
标签_歌曲名.文本 = 标题
设 Player1.源 = URL
调用 Player1.播放()
Sound组件(短音效)
Sound组件适合播放短音效(按钮点击音、提示音等):
当 按钮_点击.被点击
设 Sound1.源 = "click.mp3"
调用 Sound1.播放()
当 按钮_震动.被点击
调用 Sound1.震动(100) ' 震动100毫秒
Sound vs Player
| 特性 | Sound | Player |
|---|---|---|
| 最大时长 | < 30秒 | 无限制 |
| 同时播放 | 可以多个 | 同时只能一个 |
| 暂停控制 | ❌ | ✅ |
| 网络音频 | ❌ | ✅ |
| 用途 | 音效 | 音乐 |
常见问题
Q1: 播放网络音频时没有声音?
- 检查URL是否可直接访问(浏览器测试)
- 确认音频格式是MP3或WAV
- 检查设备音量设置
- 确保有INTERNET权限
Q2: 如何在后台继续播放?
Player组件在App进入后台时会自动暂停。要保持后台播放:
- 设置Screen1的
KeepScreenOn = true(但会耗电) - 使用前台服务(需要扩展)
- 这是App Inventor的已知限制
Q3: 如何录音?
使用 SoundRecorder 组件:
当 按钮_开始录音.被点击
调用 SoundRecorder1.开始录音()
当 按钮_停止录音.被点击
调用 SoundRecorder1.停止录音()
当 SoundRecorder1.录音完成(文件路径)
标签_状态.文本 = "录音已保存:" & 文件路径
设 Player1.源 = 文件路径
调用 Player1.播放()
总结
| 需求 | 推荐组件 |
|---|---|
| 短音效 | Sound |
| 本地音乐 | Player |
| 网络音乐 | Player(URL) |
| 流媒体 | WebView + HTML5 Audio |
| 录音 | SoundRecorder |
| 语音合成 | TTS组件 |
版权声明:MIT App Inventor 官方文档采用 CC BY-SA 4.0 授权,本文档由 ai2claw 🐝 整理。
扫码添加客服咨询