Waud 项目教程

翟万实Robust

于 2024-09-14 07:19:55 发布

阅读量675

点赞数 9

本文链接：https://blog.csdn.net/gitblog_00164/article/details/142239174

版权

Waud 项目教程

waud Web Audio Library 项目地址: https://gitcode.com/gh_mirrors/wa/waud

1. 项目介绍

Waud 是一个简单而强大的 Web 音频库，允许开发者超越 HTML5 的 <audio> 标签，轻松利用 Web Audio API。它抽象了 Web Audio API，使其在多个平台和浏览器上保持一致和可靠。对于不支持 Web Audio API 的旧浏览器，Waud 会自动回退到 HTML5 Audio。

主要特性

Base64 打包：支持 Base64 编码的音频文件。
音频精灵：支持音频精灵（Audio Sprites）。
iOS 音频解锁：自动解锁 iOS 设备上的音频播放。
自动静音：当窗口不在焦点时自动静音。
简单 API：提供简单易用的 API。
零依赖：无外部依赖。

2. 项目快速启动

安装

Waud 可以通过 npm、CDN 或 haxelib（适用于 Haxe 用户）进行安装。

通过 npm 安装

npm install waud.js

通过 CDN 使用

<script src="https://cdnjs.cloudflare.com/ajax/libs/waud/1.0.0/waud.min.js"></script>

通过 haxelib 安装（适用于 Haxe 用户）

haxelib install waud

快速示例

以下是一个简单的示例，展示如何使用 Waud 播放音频文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Waud 示例</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/waud/1.0.0/waud.min.js"></script>
</head>
<body>
    <button id="playButton">播放音频</button>
    <script>
        // 初始化 Waud
        Waud.init();

        // 创建一个音频对象
        var snd = new WaudSound("assets/loop.mp3", {
            autoplay: false,
            loop: true,
            volume: 0.5,
            onload: function() {
                console.log("音频加载完成");
            }
        });

        // 播放按钮点击事件
        document.getElementById("playButton").addEventListener("click", function() {
            snd.play();
        });
    </script>
</body>
</html>