在 JavaScript 中创建哔声

简介: 在 JavaScript 中创建哔声

[在 JavaScript 中创建哔声]

哔声通常用作某些功能的警报。但是一般的 JavaScript 约定没有任何特定的方法或属性来遵循这种操作。

有两种执行任务的方法。一种是与 HTML 标签交互,另一种是在 script标签中操作。

在这里,我们将看到在 HTML 标签中添加音频源的示例。我们还将看到另一个实例,它在音频构造函数中获取哔哔声的 URL,然后在操作后触发。

[在 JavaScript 中使用 audio HTML 标签来发出哔哔声]

我们需要在 HTML audio 标签中添加声音的来源。在定义音频和源结构时,我们添加了一个按钮元素来触发函数 playbeep()

我们将获取音频元素并在脚本部分执行其功能。当它被 sound.play() 触发时,它会创建一个与附加源相对应的声音(哔声)。

代码片段:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Press the Button</p>
    <audio id="Audio" >
        <source src="https://www.soundjay.com/misc/censor-beep-01.mp3"
        type="audio/mpeg">
    </audio>
    <button onclick="playbeep()">Press Here!</button>
    <script>
        var sound = document.getElementById('Audio');
        function playbeep(){
            sound.play()
        }
    </script>
</body>
</html>

输出:

[在 JavaScript 中为 Beep 使用 audio 构造函数]

JavaScript Audio 构造函数获取声音源。在 HTML 部分,只需要一个按钮和一个 onclick 函数,并且无论何时调用它,都会触发获取 URL 的 sound 对象。

代码片段:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>Press the Button</h2>
    <button onclick="playbeep()">Press Here!</button>
    <script>
        function playbeep() {
            var sound = new Audio('https://www.soundjay.com/misc/censor-beep-01.mp3');
            sound.play();
        }
    </script>
</body>
</html>

输出:

相关文章
|
5月前
|
存储 JavaScript 前端开发
从0开始学习JavaScript--JavaScript中的对象
JavaScript中的对象是一种重要的数据结构,它不仅是语言的基石,还提供了丰富的功能和灵活性。本文将深入研究JavaScript对象的创建、属性访问、方法定义,以及实际应用中的技巧,通过丰富的示例代码,帮助读者更全面地了解和应用这一核心概念。
|
5月前
|
JavaScript 前端开发 API
JavaScript的实例
【4月更文挑战第23天】JavaScript的实例
26 1
|
存储 JSON JavaScript
javaScript相关方法
prototype 定义和用法 prototype 是可用于所有 JavaScript 对象的全局构造函数。 prototype 引用全局 Array() 对象。 prototype 构造函数允许您向数组添加新的属性和方法。 当构造新属性时,所有数组都将获得此属性及其值。 当构造新方法时,所有数组都将获得此方法。
42 0
javaScript相关方法
|
JavaScript 前端开发
JavaScript基础——JavaScript函数
JavaScript基础——JavaScript函数
|
XML JavaScript 前端开发
【JavaScript】JavaScript基本使用方法
本文讲解:JavaScript基本使用方法
|
JavaScript 前端开发 API
JavaScript【五】JavaScript中的对象2
JavaScript【五】JavaScript中的对象
80 0
|
存储 JSON 前端开发
JavaScript【五】JavaScript中的对象1
JavaScript【五】JavaScript中的对象
89 0
|
JavaScript 前端开发 索引
JavaScript中几个相似方法对比
返回字符串两个索引之间(或到字符串末尾)的子串。
JavaScript中几个相似方法对比
|
JavaScript 前端开发
JavaScript——JavaScript的使用方式
JavaScript的使用方式有三种,分别是:、行内式、内嵌式外链式
113 0
|
JavaScript 前端开发 数据安全/隐私保护