App Inventor 2 远程音频播放教程 - 网络音乐与语音播放

« 返回首页

概述

App Inventor 2的 SoundPlayer 组件可以播放音频,但它们主要支持本地文件。要播放远程/网络音频,需要不同的方案:

方案 组件 支持格式 适用场景
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 🐝 整理。

文档反馈