简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > html教學 > 主體

用html實作一個音訊播放的程式碼

零下一度
發布： 2017-04-22 16:01:14
原創
12204 人瀏覽過

有控制項的播放器

html<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>播放音频</title>
</head>
<body>
<audio src="raw/1.mp3" controls="controls">你的浏览器不支持</audio>
</body>
</html>
登入後複製
登入後複製

播放器不可見，用按鈕控製播放

html<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>播放音频</title>
</head>
<body>
<button onclick="clickA()">播放/暂停</button>
<audio id="audio" src="raw/1.mp3">你的浏览器不支持</audio>
<script>
    var a=document.getElementById("audio");
    function clickA(){
        if(a.paused){
            a.play();
        }else{
            a.pause();
        }
    }
</script>
</body>
</html>
登入後複製
登入後複製

有控制項的播放器

html<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>播放音频</title>
</head>
<body>
<audio src="raw/1.mp3" controls="controls">你的浏览器不支持</audio>
</body>
</html>
登入後複製
登入後複製

播放器不可見，用按鈕控製播放

html<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>播放音频</title>
</head>
<body>
<button onclick="clickA()">播放/暂停</button>
<audio id="audio" src="raw/1.mp3">你的浏览器不支持</audio>
<script>
    var a=document.getElementById("audio");
    function clickA(){
        if(a.paused){
            a.play();
        }else{
            a.pause();
        }
    }
</script>
</body>
</html>
登入後複製
登入後複製


以上是用html實作一個音訊播放的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
html，音频播放
來源：php.cn
上一篇：html編寫edm時有哪些要注意的？ 下一篇：一個用Html製作的漂亮登入頁面
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
使用JS控製播放質量 有什麼方法可以使用Javascript來控制影片的播放品質嗎？更準確地說，我想使用JavaScript選擇視訊品質。就像我希望在chrome或firefox中加載瀏覽器時自動以10...
來自於 2024-04-04 00:21:55
0
1
384
選擇事件改變時，CSS動畫觸發對應效果 我正在嘗試製作一個React應用程序，現在我有一個選擇輸入框，裡面有一些寶可夢，我需要做的是每當選擇改變（即寶可夢改變）時，寶可夢精靈會進行一個小的搖晃動畫。目前我只有一個改變的精...
來自於 2024-04-01 09:16:28
0
1
350
解決播放來自另一個網站的mp3檔案的CORS錯誤 我遇到的問題是，我的React應用程式無法播放來自其他來源的音頻，並出現CORS錯誤。範例：https://audio.podigee-cdn.net/1041740-m-0fcf...
來自於 2024-03-31 22:04:39
0
1
286
有沒有辦法從 Safari 中的 HTML 視訊標籤擷取音訊和視訊？ 在chrome和firefox中，我們可以使用HTMLMediaElement.captureMediaStream()來擷取串流。但Safari不支援HTMLMediaEleme...
來自於 2024-03-31 12:27:03
0
1
329
簡化電子郵件中的影片播放：確保即時播放，無需下載螢幕 我不確定這裡“應該把梯子靠在哪堵牆上”，甚至不確定我正在嘗試做的事情的正確術語。我多年來一直為一家農業研究公司開發軟體。我們有一個Android應用程序，可以執行許多功能，包括上傳...
來自於 2024-03-30 17:12:51
0
1
433
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！