SDL3 & Web Audio: Playing Sound with SDL3_mixer SDL3 и Web Audio: Воспроизведение звука с помощью SDL3_mixer

A guide to loading audio samples using SDL3_mixer and playing them through the system audio for browser deployment. Руководство по загрузке аудиосемплов с помощью SDL3_mixer и их воспроизведение через системный звук для запуска в браузере.

Prerequisite: Ensure you have followed the Emscripten Setup Guide Предварительное условие: Убедитесь, что вы выполнили инструкции из руководства по настройке Emscripten

1. Obtain SDL3 and SDL3_mixer for Wasm 1. Получение SDL3 и SDL3_mixer для Wasm

Build SDL3 for your Wasm environment: Building SDL3 for WebAssembly. Соберите SDL3 для вашей Wasm-среды: Сборка SDL3 для WebAssembly.
Build SDL3_mixer: Building SDL3_mixer for WebAssembly. Соберите SDL3_mixer: Сборка SDL3_mixer для WebAssembly.

2. Assets 2. Ресурсы

Before creating the files, download the required asset: Перед созданием файлов скачайте необходимый ресурс:

Download the music file (OGG): Winds Of Stories.zip. This is a free file from OpenGameArt.org Скачайте музыкальный файл (OGG): Winds Of Stories.zip. Это бесплатный файл, взятый с OpenGameArt.org
Download the sound effect file (WAV): Picked Coin Echo 2.zip. This is a free file from OpenGameArt.org Скачайте звуковой эффект (WAV): Picked Coin Echo 2.zip. Это бесплатный файл, взятый с OpenGameArt.org

3. Project Architecture 3. Архитектура проекта

Let's create a project that plays a sound using SDL3_mixer and renders graphics with OpenGL. Давайте создадим проект, который воспроизводит звук с помощью SDL3_mixer и рендерит графику с помощью OpenGL.
Screenshot

C Project: Create an empty folder named music-and-sound-sdl3-mixer-opengl-wasm-c and set up the following hierarchy by creating new empty files: CMakeLists.txt, main.c and so on:

Проект на C: Создайте пустую папку с именем music-and-sound-sdl3-mixer-opengl-wasm-c и подготовьте следующую иерархию, создав пустые файлы: CMakeLists.txt, main.c и т. д.:

music-and-sound-sdl3-mixer-opengl-wasm-c/
├── config-wasm.bat
├── build-wasm.bat
├── CMakeLists.txt
├── assets/audio/
│   └── Picked Coin Echo 2.wav
│   └── Winds Of Stories.ogg
│── public/
│   └── index.html
└── src/
    └── main.c

C++ Project: Create an empty folder named music-and-sound-sdl3-mixer-opengl-wasm-cpp and set up the following hierarchy by creating new empty files: CMakeLists.txt, main.cpp and so on:

Проект на C++: Создайте пустую папку с именем music-and-sound-sdl3-mixer-opengl-wasm-cpp и подготовьте следующую иерархию, создав пустые файлы: CMakeLists.txt, main.cpp и т. д.:

music-and-sound-sdl3-mixer-opengl-wasm-cpp/
├── config-wasm.bat
├── build-wasm.bat
├── CMakeLists.txt
├── assets/audio/
│   └── Picked Coin Echo 2.wav
│   └── Winds Of Stories.ogg
│── public/
│   └── index.html
└── src/
    └── main.cpp

4. CMake Configuration 4. Конфигурация CMake

C Project: Copy and paste the following code into the CMakeLists.txt file:

Проект на C: Скопируйте и вставьте следующее содержимое в файл CMakeLists.txt:

C++ Project: Copy and paste the following code into the CMakeLists.txt file:

Проект на C++: Скопируйте и вставьте следующее содержимое в файл CMakeLists.txt:

5. Source Code 5. Исходный код

`src/main.c` (or `src/main.cpp`):

public/index.html:

6. Automation Scripts (.bat) 6. Скрипты автоматизации (.bat)

config-wasm.bat

emcmake cmake -S . -B dist/web

build-wasm.bat

cd dist\web
cmake --build .

cd ..\..
mkdir public\js
set current_dir=%~dp0
copy "%current_dir%dist\web\app.wasm" "%current_dir%public\js"
copy "%current_dir%dist\web\app.js" "%current_dir%public\js"

7. Build and Run 7. Сборка и запуск

Configure and build the project: Сконфигурируйте и соберите проект:

# Configure
config-wasm

# Build
build-wasm

Now, start your local server: Теперь запустите локальный сервер:

# Option 1: Using Node.js (http-server)
http-server -c-1

# Option 2: Using Python
python -m http.server 8080

Open localhost:8080 in your browser and check the console (F12 or Ctrl+Shift+J) to see the output. Откройте localhost:8080 в браузере и проверьте консоль (F12 или Ctrl+Shift+J), чтобы увидеть результат.

8. Source Code 8. Исходный код

You can explore the source code and download the complete project directly from the GitHub repository: Вы можете изучить исходный код и скачать готовый проект напрямую из репозитория на GitHub:

C Version: View C Repo Репозиторий (C)

C++ Version: View C++ Repo Репозиторий (C++)