希望有兩個按鈕，一個用于“暫停”，一個用于“播放”MP3 音頻檔案。按鈕顯示但不暫停/播放音頻，以及音頻不播放。這是我正在使用的代碼。謝謝。
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loadingscreen</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body>
<audio controls id="song">
<source src="audio/music.mp3" type="audio/mpeg">
</audio>
<button onclick="playAudio()" type="button">Play</button>
<button onclick="pauseAudio()" type="button">Pause</button>
<div class="slides slowFade">
<div class="slide">
<img src="img/image1.jpg" alt="img"/ height="100%" width="100px">
</div>
<div class="slide">
<img src="img/image2.jpg" alt="img"/ height="100%" width="100px">
</div>
<div class="slide">
<img src="img/image3.png" alt="img"/ height="100%" width="100px">
</div>
<div class="slide">
<img src="img/image4.jpg" alt="img"/ height="100%" width="100px">
</div>
</div>
</body>
</html>
JavaScript
var x = document.getElementById("song");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
uj5u.com熱心網友回復：
加載檔案后，您必須加載 js 檔案。
您應該將腳本放在 HTML 檔案的末尾。您用于var x = document.getElementById("song"); 獲取 DOM 元素，但該元素尚未加載，因為您的腳本位于頁面頂部，因此您可以通過以下方式更改代碼：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loadingscreen</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<audio controls id="song">
<source src="audio/music.mp3" type="audio/mpeg">
</audio>
<button onclick="playAudio()" type="button">Play</button>
<button onclick="pauseAudio()" type="button">Pause</button>
<div class="slides slowFade">
<div class="slide">
<img src="img/image1.jpg" alt="img"/ height="100%" width="100px">
</div>
<div class="slide">
<img src="img/image2.jpg" alt="img"/ height="100%" width="100px">
</div>
<div class="slide">
<img src="img/image3.png" alt="img"/ height="100%" width="100px">
</div>
<div class="slide">
<img src="img/image4.jpg" alt="img"/ height="100%" width="100px">
</div>
</div>
<!-- the DOM will be available here -->
<script src="script.js"></script>
</body>
</html>
在檔案末尾加載 JS 檔案是一種很好的做法，可以讓用戶更快地看到 HTML。
如果由于任何原因您無法在頁面末尾加載 js 檔案，您可以通過以下方式更改 JS 檔案：
function playAudio() {
const x = document.getElementById("song");
x.play();
}
function pauseAudio() {
const x = document.getElementById("song");
x.pause();
}
uj5u.com熱心網友回復：
您是否嘗試過使用 javascript 音頻？如
var myAudio = new Audio(myAudioLink)
然后做
function playMyAudio() {
myAudio.play()
}
function pauseMyAudio() {
myAudio.pause()
}
我很樂意提供幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/442297.html
標籤：javascript html 按钮 声音的
上一篇：單擊按鈕時添加和洗掉邊框JS