载说明：原创不易，未经授权，谢绝任何形式的转载

有时候，我们需要通过JavaScript在网站上播放通知声音。本文将介绍如何实现这一功能。

使用Audio构造函数在网站上播放通知声音

我们可以通过使用Audio构造函数创建一个音频播放器对象来在网站上使用JavaScript播放通知声音。

例如，如果我们有以下按钮：

<button>Play</button>

然后，我们可以通过编写以下代码来使用Audio构造函数，在点击按钮时播放音频剪辑：

const playAudio = (url) => {

const audio = new Audio(url);

audio.play();

}

const button = document.querySelector('#play-button');

button.addEventListener('click', () => {

const audioUrl = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3';

playAudio(audioUrl);

console.log(`Now playing audio from ${audioUrl}`);

});

这段代码定义了一个名为`playAudio`的函数，它接受一个URL参数，用于指定要播放的音频文件的路径。当调用`playAudio`函数时，它会创建一个新的`Audio`对象并播放指定的音频文件。

接下来，使用`querySelector`方法获取网页中的一个ID为`play-button`的元素，并将其存储在`button`变量中。然后，使用`addEventListener`方法为`button`元素添加一个`click`事件监听器。当按钮被点击时，触发回调函数。在回调函数中，我们定义了一个名为`audioUrl`的常量，它存储了所需的音频文件的URL。然后，我们调用`playAudio`函数并将`audioUrl`作为参数传递给它，以便播放指定的音频文件。最后，我们将一条消息记录到控制台，指示正在播放哪个音频文件。

结束

我们可以使用JavaScript通过使用Audio构造函数创建一个音频播放器对象来在网站上播放通知声音。

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。

整理了一下里面对我们自己通过 LLM 生成代码可能有用的提示词和经验。感兴趣可以看看。

他们发现第一次生成的网页通常质量不太行，但是第二次增强提示之后 GPT-4V 生成网页代码质量明显变好，下面是对应提示词。

第一次代码生成提示词：

假设你是一位精通HTML和CSS的网页开发专家。当用户提供一张网页的截图给你时，你的任务是创建一个HTML文件。这个文件需要用HTML和CSS编码来精确还原截图中的网站设计。重要的是，所有的CSS样式代码都要直接写在HTML文件里，而不是链接到其他文件。

如果原网页中有图片，你可以用一个名为"rick.jpg"的图片作为所有图片的替代品。即便网页中的某些图片已经被蓝色的矩形占位符替代了，你同样需要使用"rick.jpg"作为这些位置的图片。记住，你的HTML文件中不应包含任何外部文件的链接。

此外，这个任务不需要你使用JavaScript编写动态交互脚本。你的重点应该放在复原网页元素的大小、文本、位置、颜色以及整体布局上。最终，你需要提供完整的HTML文件内容，其中包含了所有必要的CSS样式代码。

增强提示词：

作为一名擅长HTML和CSS的网页开发高手，你面临的挑战是修改一个已有的HTML文件。这个文件是用来构建一个网页的，但它目前有一些缺失或错误的部分，使得它与原网页有所不同。我将向你展示我想要创建的网页原型和目前HTML实现的网页效果。同时，我也会提供你我想在网页中包含的所有文本。

你的任务是仔细比较这两个网页，并根据提供的文本内容，修改原始的HTML代码。你需要确保新的实现在外观上与参考网页完全一致。在编码时，要保证HTML代码语法正确，能够生成一个结构完整的网页。对于需要图片的地方，你可以暂时用一个名为"rick.jpg"的图片作为占位符。

在进行代码修订时，请特别注意网页元素的大小、文本内容、位置布局和颜色等方面，确保最终的布局和原网页高度相似。完成后，请直接提供新修订的HTML文件内容，无需附加任何解释。

LLM 通过设计生成代码未来重点和研究方向：

◆为多模态大语言模型开发更有效的提示技巧，尤其是在处理复杂网页设计时，例如通过分步骤生成网页的不同部分。

◆使用真实世界的网页内容来训练开放源代码的多模态大语言模型。我们的初步实验表明，直接在真实的网页上进行训练存在挑战，因为这些网页往往内容繁杂、数据杂乱。未来的研究可能会探索数据清洗和优化的方法，以实现更稳定有效的训练过程。

◆超越传统的截图输入方式，例如，尝试使用前端设计师的Figma框架或手绘草图作为测试输入。这种方法的扩展还需要我们仔细地重新设计评估体系。

◆将研究范围从静态网页扩展到动态网页。这意味着评估过程需要考虑网页的交互功能，而不仅仅是视觉效果的相似性。