整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
載說明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載
有時候，我們需要通過JavaScript在網(wǎng)站上播放通知聲音。本文將介紹如何實(shí)現(xiàn)這一功能。
我們可以通過使用Audio構(gòu)造函數(shù)創(chuàng)建一個音頻播放器對象來在網(wǎng)站上使用JavaScript播放通知聲音。
例如，如果我們有以下按鈕：
<button>Play</button>然后，我們可以通過編寫以下代碼來使用Audio構(gòu)造函數(shù)，在點(diǎn)擊按鈕時播放音頻剪輯：
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`的函數(shù)，它接受一個URL參數(shù)，用于指定要播放的音頻文件的路徑。當(dāng)調(diào)用`playAudio`函數(shù)時，它會創(chuàng)建一個新的`Audio`對象并播放指定的音頻文件。
接下來，使用`querySelector`方法獲取網(wǎng)頁中的一個ID為`play-button`的元素，并將其存儲在`button`變量中。然后，使用`addEventListener`方法為`button`元素添加一個`click`事件監(jiān)聽器。當(dāng)按鈕被點(diǎn)擊時，觸發(fā)回調(diào)函數(shù)。在回調(diào)函數(shù)中，我們定義了一個名為`audioUrl`的常量，它存儲了所需的音頻文件的URL。然后，我們調(diào)用`playAudio`函數(shù)并將`audioUrl`作為參數(shù)傳遞給它，以便播放指定的音頻文件。最后，我們將一條消息記錄到控制臺，指示正在播放哪個音頻文件。
我們可以使用JavaScript通過使用Audio構(gòu)造函數(shù)創(chuàng)建一個音頻播放器對象來在網(wǎng)站上播放通知聲音。
由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請別忘了點(diǎn)贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時，如果您想獲取更多前端技術(shù)的知識，歡迎關(guān)注我，您的支持將是我分享最大的動力。我會持續(xù)輸出更多內(nèi)容，敬請期待。
整理了一下里面對我們自己通過 LLM 生成代碼可能有用的提示詞和經(jīng)驗(yàn)。感興趣可以看看。
他們發(fā)現(xiàn)第一次生成的網(wǎng)頁通常質(zhì)量不太行，但是第二次增強(qiáng)提示之后 GPT-4V 生成網(wǎng)頁代碼質(zhì)量明顯變好，下面是對應(yīng)提示詞。
第一次代碼生成提示詞：
假設(shè)你是一位精通HTML和CSS的網(wǎng)頁開發(fā)專家。當(dāng)用戶提供一張網(wǎng)頁的截圖給你時，你的任務(wù)是創(chuàng)建一個HTML文件。這個文件需要用HTML和CSS編碼來精確還原截圖中的網(wǎng)站設(shè)計。重要的是，所有的CSS樣式代碼都要直接寫在HTML文件里，而不是鏈接到其他文件。
如果原網(wǎng)頁中有圖片，你可以用一個名為"rick.jpg"的圖片作為所有圖片的替代品。即便網(wǎng)頁中的某些圖片已經(jīng)被藍(lán)色的矩形占位符替代了，你同樣需要使用"rick.jpg"作為這些位置的圖片。記住，你的HTML文件中不應(yīng)包含任何外部文件的鏈接。
此外，這個任務(wù)不需要你使用JavaScript編寫動態(tài)交互腳本。你的重點(diǎn)應(yīng)該放在復(fù)原網(wǎng)頁元素的大小、文本、位置、顏色以及整體布局上。最終，你需要提供完整的HTML文件內(nèi)容，其中包含了所有必要的CSS樣式代碼。
增強(qiáng)提示詞：
作為一名擅長HTML和CSS的網(wǎng)頁開發(fā)高手，你面臨的挑戰(zhàn)是修改一個已有的HTML文件。這個文件是用來構(gòu)建一個網(wǎng)頁的，但它目前有一些缺失或錯誤的部分，使得它與原網(wǎng)頁有所不同。我將向你展示我想要創(chuàng)建的網(wǎng)頁原型和目前HTML實(shí)現(xiàn)的網(wǎng)頁效果。同時，我也會提供你我想在網(wǎng)頁中包含的所有文本。
你的任務(wù)是仔細(xì)比較這兩個網(wǎng)頁，并根據(jù)提供的文本內(nèi)容，修改原始的HTML代碼。你需要確保新的實(shí)現(xiàn)在外觀上與參考網(wǎng)頁完全一致。在編碼時，要保證HTML代碼語法正確，能夠生成一個結(jié)構(gòu)完整的網(wǎng)頁。對于需要圖片的地方，你可以暫時用一個名為"rick.jpg"的圖片作為占位符。
在進(jìn)行代碼修訂時，請?zhí)貏e注意網(wǎng)頁元素的大小、文本內(nèi)容、位置布局和顏色等方面，確保最終的布局和原網(wǎng)頁高度相似。完成后，請直接提供新修訂的HTML文件內(nèi)容，無需附加任何解釋。
LLM 通過設(shè)計生成代碼未來重點(diǎn)和研究方向：
◆為多模態(tài)大語言模型開發(fā)更有效的提示技巧，尤其是在處理復(fù)雜網(wǎng)頁設(shè)計時，例如通過分步驟生成網(wǎng)頁的不同部分。
◆使用真實(shí)世界的網(wǎng)頁內(nèi)容來訓(xùn)練開放源代碼的多模態(tài)大語言模型。我們的初步實(shí)驗(yàn)表明，直接在真實(shí)的網(wǎng)頁上進(jìn)行訓(xùn)練存在挑戰(zhàn)，因?yàn)檫@些網(wǎng)頁往往內(nèi)容繁雜、數(shù)據(jù)雜亂。未來的研究可能會探索數(shù)據(jù)清洗和優(yōu)化的方法，以實(shí)現(xiàn)更穩(wěn)定有效的訓(xùn)練過程。
◆超越傳統(tǒng)的截圖輸入方式，例如，嘗試使用前端設(shè)計師的Figma框架或手繪草圖作為測試輸入。這種方法的擴(kuò)展還需要我們仔細(xì)地重新設(shè)計評估體系。
◆將研究范圍從靜態(tài)網(wǎng)頁擴(kuò)展到動態(tài)網(wǎng)頁。這意味著評估過程需要考慮網(wǎng)頁的交互功能，而不僅僅是視覺效果的相似性。
ip提示層在網(wǎng)頁中經(jīng)常用到，實(shí)現(xiàn)的方法也有很多，今天就來說一種簡易的實(shí)現(xiàn)方法！
效果圖：
實(shí)現(xiàn)代碼
html+css：
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
