Web音频API：向Web应用程序添加声音

最新推荐文章于 2022-11-15 07:27:17 发布

cunjie3951

最新推荐文章于 2022-11-15 07:27:17 发布

阅读量606

点赞数

文章标签： java python css jquery bootstrap ViewUI

网络音频发生了什么？一段时间以来，网络是展示音乐品味的平台。从在后台冒泡的MIDI版本的“最终倒计时”，到自动播放扔到您脸上的MySpace mp3，声音无处不在。

不再。由于这些用户体验暴行被烧毁，Web开发人员远离它。可悲的是，声音在网络上排在了后排，而本机应用程序却蓬勃发展。

想想当您收到电子邮件时听到的通知声音，或者当您刷新Twitter应用程序时听到的小声音。此类应用程序展示了声音如何与出色的用户体验整合在一起。

在本教程中，我将向您展示如何以一种很好的方式将声音传回网络！

Web Audio API

Web Audio API是在浏览器中处理声音的强大，高性能的方式。在继续本教程之前，您可能需要查看本系列的上一教程，其中介绍了如何使用JavaScript制作基本声音以及如何播放mp3文件。

在本教程中，我们将模拟一个付款页面，该页面会向我们提供有关付款成功的音频反馈。我将使用Bootstrap使事情看起来更快。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Add sound to your web app</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h1>My shop</h1>
                    <p>Are you ready to buy this item?</p>
                    <form action="">
                        <div class="form-group">
                            <label>Name on card</label>
                            <input type="text" class="form-control" value="Guybrush Threepwood" />
                        </div>
                        <div class="form-group">
                            <label>Card number</label>
                            <input type="text" class="form-control" value="1234-1234-1234-1234" />
                        </div>
                    </form>
                    <button id="buy-now-button" type="button" class="btn btn-primary"
                        data-loading-text="Processing..." data-complete-text="Success!">Buy now</button>
                </div>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        
        <script src="scripts/success-sound.js"></script>
    </body>
</html>

您会在最底部注意到我包含一个名为“ success-sound.js”的文件。在这里，我们将编写代码以在用户付款成功后向其提供音频反馈。创建此文件后，我们要做的第一件事就是创建AudioContext。您可能从上一教程中还记得，AudioContext是我们访问Web Audio API各种功能的方式。

var context = new AudioContext();

震荡器

关于Web Audio API的最好的事情之一是，它使我们无需查看音频文件即可从头开始创建声音。我们使用振荡器来做到这一点。

振荡器是一种营造我们可以听到的音调的方式。他们通过产生一定频率的周期波来做到这一点。该波的形状各不相同，但最常见的类型是正弦波，方波，三角波和锯齿波。这些类型的波听起来都不同。让我们创建两个三角波振荡器。

var osc1 = context.createOscillator(),
    osc2 = context.createOscillator();
    
osc1.type = 'triangle';
osc2.type = 'triangle';

振荡器默认情况下声音很大，因此除非我们想让用户感到恐惧，否则应将音量调低一点。因为Web Audio API通过将节点链接在一起以通过管道传递声音来工作，所以我们创建了振荡器并将其连接到GainNode。

var volume = context.createGain();

volume.gain.value = 0.1;

增益节点将输入的声音音量乘以您指定的数字。因此，在这种情况下，音量将是传递给它的信号的十分之一。

让我们连接一切。

// Connect oscillators to the GainNode
osc1.connect(volume);
osc2.connect(volume);

// Connect GainNode to the speakers
volume.connect(context.destination);

然后检查我们是否正确地播放了振荡器两秒钟。

// How long to play oscillator for (in seconds)
var duration = 2;

// When to start playing the oscillators
var startTime = context.currentTime;

// Start the oscillators
osc1.start(startTime);
osc2.start(startTime);

// Stop the oscillators 2 seconds from now
osc1.stop(startTime + duration);
osc1.stop(startTime + duration);

此时，您应该在重新加载页面时听到提示音。我敢肯定，这不是最惊人的声音，但这只是一个开始！

我们创建的振荡器以默认频率播放。通过更改此频率，我们可以更改您在演奏时听到的音符。这将使我们的音调更令人愉悦，并且是您在用户听到声音时想要唤起的感觉的关键。让我们将振荡器更改为以音符“ B4”弹奏，即493.883Hz。

var frequency = 493.883;

osc1.frequency.value = frequency;
osc2.frequency.value = frequency;

现在，如果我们重新加载页面，您会听到不同音调的声音。此时您可能会想：“为什么我们要演奏两个音调完全相同的振荡器？” 好吧，这给我们带来了一些小技巧，我们可以做些使声音听起来更好听的技巧。

如果我们使振荡器失谐以使其频率稍有不同，则最终会产生很好的合唱效果，使音色更丰富。

var frequency = 493.883;

osc1.frequency.value = frequency + 1;
osc2.frequency.value = frequency - 2;

虽然我们的小声音听起来好多了，但突然结束了。为了减少这种震颤，我们应该在声音结束时Swift调低音量。这也称为“淡出”。这是通过AudioParams完成的，这些音频参数用于自动执行音频节点的值，例如增益和频率。在本系列的下一个教程中，我们将更详细地介绍AudioParams。

// Set the volume to be 0.1 just before the end of the tone
volume.gain.setValueAtTime(0.1, startTime + duration - 0.05);

// Make the volume ramp down to zero 0.1 seconds after the end of the tone
volume.gain.linearRampToValueAtTime(0, startTime + duration);

我们在这里要说的是确保在完成音调之前将音量设置为0.1、0.05秒。然后继续调低音量，直到声音结束的同时达到零。

到目前为止，让我们将代码包装到一个函数中，看看我们有什么。

// Play oscillators at certain frequency and for a certain time
var playNote = function (frequency, startTime, duration) {
    var osc1 = context.createOscillator(),
        osc2 = context.createOscillator(),
        volume = context.createGain();

    // Set oscillator wave type
    osc1.type = 'triangle';
    osc2.type = 'triangle';

    volume.gain.value = 0.1;    

    // Set up node routing
    osc1.connect(volume);
    osc2.connect(volume);
    volume.connect(context.destination);

    // Detune oscillators for chorus effect
    osc1.frequency.value = frequency + 1;
    osc2.frequency.value = frequency - 2;

    // Fade out
    volume.gain.setValueAtTime(0.1, startTime + duration - 0.05);
    volume.gain.linearRampToValueAtTime(0, startTime + duration);

    // Start oscillators
    osc1.start(startTime);
    osc2.start(startTime);

    // Stop oscillators
    osc1.stop(startTime + duration);
    osc2.stop(startTime + duration);
};

为了使此功能更强大，我删除了一些变量并允许传递这些值。这使我们能够以不同的频率演奏不同的音符。现在是时候发挥创造力了！

成功

想一想用户刚从您的在线商店购买商品后想要的感受。这是一种积极的体验-某人购买了他们想要的东西，以便以某种方式改善生活，没有发生错误，交易成功完成。

音频方面，成功的指示实际上非常简单。最后，音高上升的音乐主题总是比音调下降的音乐主题更为欢乐。您甚至都不需要调子或一堆音符来传达这一点。为了证明这一理论，让我们仅用两个单音作为我们的成功主题。

// Play a 'B' now that lasts for 0.116 seconds
playNote(493.883, context.currentTime, 0.116);

// Play an 'E' just as the previous note finishes, that lasts for 0.232 seconds
playNote(659.255, context.currentTime + 0.116, 0.232);

啊，成功的甜美声音。

请记住，如果玩振荡器不是您的乐趣所在，则可以改用mp3文件。阅读上一教程，了解操作方法。

最好将这两个playNote调用包装到一个函数调用中，这样我们就可以轻松地播放声音。

var playSuccessSound = function () {
    // Play a 'B' now that lasts for 0.116 seconds
    playNote(493.883, context.currentTime, 0.116);

    // Play an 'E' just as the previous note finishes, that lasts for 0.232 seconds
    playNote(659.255, context.currentTime + 0.116, 0.232);
};

现在由您决定如何触发此声音，以及您希望播放什么事件以作出反应。就本教程而言。让我们假冒一个三秒钟的Ajax调用。我们将使用它来假装正在发生某些服务器端事务。

var myFakeAjaxCall = function (callback) {
    setTimeout(function () {
        callback();
    }, 3000);
};

我们现在要做的就是将事件监听器添加到“立即购买”按钮中。

$('#buy-now-button').click(function () {
    myFakeAjaxCall(function () {
        playSuccessSound();
    });
});

单击该按钮，等待三秒钟，然后在听到音频确认您的交易成功的消息时高兴地跳舞。

为了更改按钮上的文本以直观地指示发生了某些事情，Bootstrap提供了一些按钮帮助器函数来交换data属性中提供的文本。这种工作方式不在本文讨论范围之内，但这是完整性的代码。

$('#buy-now-button').click(function () {
    var that = this,
        $btn = $(this).button('loading');

    myFakeAjaxCall(function () {
        playSuccessSound();
        $btn.button('complete');
    });
});

希望本教程对您有所帮助，并鼓励您为您的Web应用添加声音（负责任！）。本教程的代码在GitHub上，以及我们最终声音的演示。本系列的下一篇教程是为那些已经发现振荡器错误的人准备的。我们将构建一个网络音频合成器。

翻译自: https://code.tutsplus.com/tutorials/the-web-audio-api-adding-sound-to-your-web-app--cms-23790

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web音频API：向Web应用程序添加声音

网络音频发生了什么？一段时间以来，网络是展示音乐品味的平台。从在后台冒泡的MIDI版本的“最终倒计时”，到自动播放扔到您脸上的MySpace mp3，声音无处不在。不再。由于这些用户体验暴行被烧毁，Web开发人员远离它。可悲的是，声音在网络上排在了后排，而本机应用程序却蓬勃发展。想想当您收到电子邮件时听到的通知声音，或者当您刷新Twitter应用程序时听到的小声音。此类应...
复制链接

扫一扫