如何在 JavaScript 中发出哔哔声？

哔哔声通常用于网站的通知警报。在您需要在网站中使用哔哔声的其他一些情况。

您可以在杂货店、图书馆等许多地方找到哔哔声的真实生活示例。本章将向您展示如何使用 JavaScript 编程语言 在网站中使用哔哔声。

以下是本章将讨论的情况

• 警报通知
• 使网站更具交互性

在本章中，我们将向您展示如何在按钮单击时播放哔哔声。

何处使用哔哔声

大多数时候，您会注意到在条形码扫描时会发出声音；它表示扫描成功。这种声音是程序员用来向用户发送扫描成功信号的哔哔声。

除此之外，您在视频中也多次听到过这种哔哔声，以静音部分声音。这种哔哔声可能还有其他用途。它有助于使网站更具交互性。

实施

要使用 JavaScript 在按钮单击时发出哔哔声，不需要冗长的代码来实现。但是，您需要使用 HTML 选项卡嵌入哔哔声的源，并在 src 中提供音频链接。

我们将举一个例子，在按钮单击时，我们将调用一个用户定义的函数，其中将包含哔哔声的代码。

除此之外，我们将使用 JavaScript 的 play() 函数来播放代码中提供的音乐或声音。以下是一个播放哔哔声的示例。

示例 1

这是使用 JavaScript 编程语言播放哔哔声最简单、最短的代码。在这个例子中，我们将通过在 JavaScript 代码中提供其链接，直接从互联网上获取哔哔声，并在单击时播放。

复制代码

输出

在 Web 浏览器上执行此代码时，您将看到如下屏幕截图所示的输出，以及一个按钮

当您单击此 按此按钮 时，它将播放哔哔声。

示例 2：使用 <audio> 标签

在本例中，我们将使用 <audio> 和 <source> 标签来提供音乐的 id 和 src，并使用 JavaScript 代码将它们嵌入。在这里，我们将通过在 JavaScript 代码中提供其链接来从互联网获取哔哔声。

复制代码

输出

在 Web 浏览器上执行代码；您将看到如下屏幕截图所示的输出

在这里，单击 单击以发出哔哔声 按钮以发出哔哔声。每次单击此按钮时，都会触发一个函数并播放哔哔声。

使用 JavaScript 播放和暂停声音

除了哔哔声，您还可以使用任何其他声音在按钮单击时播放，您还可以使用 JavaScript 的 pause() 函数停止播放该声音。

这些 play() 和 pause() 函数与程序员在函数中提供的声音对象一起使用。

示例 3

看看这个例子，看看它是如何实际完成的

复制代码

输出

当您在 Web 上执行上述代码时，您将获得包含两个按钮的输出。一个用于播放声音，另一个用于在中间暂停/停止声音。

单击 播放音频 按钮来播放音轨，单击 暂停音频 按钮来在播放过程中停止声音。

当您播放歌曲时，您会在浏览器中看到一个音乐按钮。

示例 4：使用 <embed> 标签

以下示例是单击按钮时发出哔哔声的另一个示例。在此示例中，我们将使用 HTML 的 <embed> 标签在 src 参数中提供来自互联网的哔哔声链接。

复制代码

输出

与前面的示例类似，此代码在执行上述代码后将在如下屏幕截图所示的输出中显示

在这里，单击 单击以发出哔哔声 按钮以发出哔哔声。每次单击此按钮时，都会触发一个函数并播放哔哔声。

注意：我们建议您使用 <audio> 或 <video> 标签在您的网站中嵌入声音或视频。