資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在HTML文件中嵌入音訊元素？
HTML 有一個音訊元素，可以用來在 HTML 文件中嵌入音訊元素。透過在網頁上新增音軌或音效，可以改善使用者體驗，在 HTML 文件中包含音訊元素。只需在我們的 HTML 程式碼中包含 <audio> 元素，並使用“src”屬性指定音訊檔案源即可嵌入音訊檔案。還可以新增其他屬性，例如“controls”啟用音訊播放控制元件，“autoplay”自動開始播放。我們可以透過這些簡單的步驟輕鬆地將音訊新增到您的 HTML 網頁，以提高受眾參與度。
語法
<audio> <source src= "" type= "audio/mp3"> </source> </audio>
HTML 元素 <audio> 用於在文件中嵌入聲音內容。它可以擁有一個或多個音訊源，這些源由 src 屬性或 <source> 元素表示。
<audio controls>
音訊元素提供一個名為 controls 的屬性，可以啟用音量增大/減小、時間長度、選單選項等。
<audio playback>
HTML 音訊元素中的播放屬性 simply 啟用給定連結的任何聲音的自動播放。
示例 1
在下面的示例中，我們將使用音訊元素將音訊檔案嵌入到 HTML 文件中。音訊有一個名為 controls 的屬性，它會向音訊元素新增播放控制元件。這允許使用者播放、暫停和調整音量。頁面上還包含標題和段落，其中包含有關音樂在冥想中作用的訊息。網頁背景顏色為橙色，標題文字顏色為白色。
<!DOCTYPE html>
<html>
<title>Embed audio using HTML</title>
<head>
</head>
<body style="background-color: orange;">
<center>
<h1 style="color:white;"> My world Music </h1>
<audio controls>
<source
src="https://samplelib.com/lib/preview/mp3/sample-3s.mp3"
type="audio/mp3">
</source>
</audio>
</center>
</body>
</html>
示例 2
在下面的示例中，我們將使用名為 autoplay 的音訊屬性，該屬性提供自動播放功能來播放聲音。然後它新增 source 元素，其中包含屬性 - src（貼上音訊連結）和 type（給出音訊檔案型別）。為了使網頁看起來更好，它在 body 元素中新增背景影像並在網頁上獲取輸出。
<!DOCTYPE html>
<html>
<title>Embed audio using HTML</title>
<head>
</head>
<body style="background-image: url('https://images.pexels.com/photos/11356284/pexels-photo-11356284.jpeg?auto=compress&cs=tinysrgb&w=450&h=750&dpr=1'); background-repeat: no-repeat; width: 153px; height: 86px;";>
<center>
<h1 style="color: white;">Meditation Music with autoplay feature</h1>
<audio autoplay controls>
<source src="https://audio-previews.elements.envatousercontent.com/files/304799645/preview.mp3?response-content-disposition=attachment%3B+filename%3D%22XYFTLYY-this-is-meditation.mp3%22"
type="audio/mp3">
</source>
</audio>
</center>
</body>
</html>
結論
我們瞭解了音訊元素中的 src 屬性，它為使用者提供不同的功能。controls 屬性新增音量按鈕、暫停、繼續等，而 autoplay 控制元件由布林屬性定義，該屬性將自動開始播放影片。例如，此型別的程式碼通常用於播客、音樂或任何組織。
3K+ 次檢視
