10分钟时间，在 ABAP 系统实现一个音乐播放器

笔者从 2021 年开始写作的ABAP 开发教程，到 2025年6月11日为止介绍的开发步骤，基本都是如何在 ABAP 系统里实现一些面向企业级的需求。

笔者这套教程的完整目录如下，目前总共 246 篇文章。

扫码阅读。

不过大家可别对 ABAP 产生误解，认为它的能力就仅仅只能实现 2B 领域的业务。

实际上，ABAP 也能用来实现一些娱乐级的需求，比如本文介绍的，10 分钟之内在 ABAP 系统里实现一个音乐播放器。

大家先看一下效果。

浏览器打开该应用，可以采用拖拽的方式，选择一个本地 mp3 文件，放置到应用里。也可以使用 windows 的文件选择框，手动选择一个 mp3 文件。

选择好 mp3 文件之后，「解析元数据」的按钮变成可点击状态。同时也可以点击「播放音乐」按钮。

点击解析数据元按钮，可以显示这个 mp3 文件里包含的元数据，比如文件类型，歌曲所属的专辑，时长，采样率，声道数等等。

点击播放之后，可以看到歌曲播放进度和剩余时长，可以通过鼠标拖拽的方式，来控制歌曲的播放音量和进度。

支持柱状，波形和环形三种方式来显示声音的频谱分析。

可以看看下面这个 gif 展示的效果。

下面介绍具体的开发步骤。

注意笔者教程文章的标题：在 ABAP 系统实现音乐播放器，而并非使用 ABAP 实现音乐播放器。

实际上，这个应用虽然在 ABAP 系统创建并在 ABAP 系统启动，但 90% 的部分都并非 ABAP 实现，而是另一门编程语言 JavaScript.

这些 JavaScript 实现，放在一种名叫 BSP 的 ABAP 应用类型里。这种 BSP 应用，不像传统的 ABAP 报表那样运行在 SAPGUI 里，而是运行在浏览器里。

大家千万不要小看 BSP 这种类型的应用，它的历史非常悠久，2001 年诞生时，笔者也才刚刚上大学。BSP 全称 Business Server Page，虽然历史悠久，目前仍然在 SAP 系统和应用中扮演着举足轻重的作用，因为 SAP 的旗舰级产品 SAP S/4HANA，其前端展现层的 Fiori 应用，其背后的载体就是 BSP 应用。

笔者另外两套教程介绍的 SAP UI5 Freestyle 和 SAP Fiori Elements 应用的开发，在本地 Visual Studio Code 或者浏览器里的 SAP Business Application Studio 完成开发之后，最后都需要进行服务器端部署，部署之后，原先本地开发好的应用，就上传到了 SAP S/4HANA 服务器后端，成为部署过程中自动生成的 BSP 应用的一部分。

一套适合 SAP UI5 开发人员循序渐进的学习教程

SAP Fiori Elements 从入门到进阶

自 2001 年左右 SAP 推出 Internet Transaction Server(ITS)之后，开发者渴望一种能直接在 ABAP 堆栈内编写 HTML 的方式。BSP 应运而生，它借鉴 JSP / ASP 等服务器端脚本思想，让后端 ABAP 逻辑与前端标记语言紧密配合，成为 NetWeaver 时代 Web UI 的主力技术之一。

与后续 Web Dynpro ABAP 或 SAPUI5 相比，BSP 相对轻量、自由度高、易与现有 ABAP 资产集成，在 SAP CRM、SRM、BW Portal 早期版本中大量使用。

我觉得 BSP 开发最爽的一点，就是它可以 ABAP 和 JavaScript/HTML 编程混着用，非常酷。

具体实现步骤参见笔者的教程文章