@咯叽，如果只需在 HTML 文件中包含 <audio> 标签以及引入外部的 JavaScript 文件，您可以按照以下方式进行操作：
1. 创建一个名为 "audioPlayer.js" 的外部 JavaScript 文件，并将以下代码复制到该文件中：
(function() {
var audio = document.querySelector("audio");
// 创建按钮元素
var playButton = document.createElement("button");
playButton.textContent = "▷";
// 点击按钮时切换播放状态
playButton.addEventListener("click", function() {
if (audio.paused) {
audio.play();
playButton.textContent = "■";
} else {
audio.pause();
playButton.textContent = "▷";
}
});
// 添加按钮到DOM
audio.insertAdjacentElement("afterend", playButton);
// 播放结束时重置按钮状态
audio.addEventListener("ended", function() {
playButton.textContent = "▷";
});
})();
2. 在 HTML 文件中，使用 <audio> 标签来包含音频文件，并使用 <script> 标签引入外部的 JavaScript 文件：
<audio preload="none" src="我要看见她.mp3"></audio>
<script src="audioPlayer.js"></script>
在这个示例中，我们将整个 JavaScript 代码放入了一个立即调用的函数表达式 (IIFE) 中。这样可以确保代码在加载时自动执行。
这样，您只需在 HTML 文件中包含 <audio> 标签和引入外部 JavaScript 文件的代码。在外部的 JavaScript 文件中，会自动执行逻辑来创建和显示音频播放器。
@咯叽，如果您希望将上述代码放在外部的 JavaScript 文件中，并通过调用方式使用，您可以按照以下步骤进行操作：
1. 创建一个名为 "audioPlayer.js" 的文本文件，并将以下代码复制到该文件中：
function createAudioPlayer() {
var audio = document.querySelector("audio");
// 创建按钮元素
var playButton = document.createElement("button");
playButton.textContent = "▷";
// 点击按钮时切换播放状态
playButton.addEventListener("click", function() {
if (audio.paused) {
audio.play();
playButton.textContent = "■";
} else {
audio.pause();
playButton.textContent = "▷";
}
});
// 添加按钮到DOM
audio.insertAdjacentElement("afterend", playButton);
// 播放结束时重置按钮状态
audio.addEventListener("ended", function() {
playButton.textContent = "▷";
});
}
2. 在您的 HTML 文件中，使用 <script> 标签来引入外部的 JavaScript 文件，并在需要调用音频播放器的地方添加以下代码：
<audio preload="none" src="我要看见她.mp3"></audio>
<script src="audioPlayer.js"></script>
<script>
createAudioPlayer();
</script>
在这个示例中，我们将音频播放器的逻辑封装在名为 "audioPlayer.js" 的外部 JavaScript 文件中。然后，我们通过在 HTML 文件中使用 <script> 标签来引入外部文件。随后，在另一个 <script> 标签中，调用 createAudioPlayer() 函数来创建并显示音频播放器。
通过这种方式，您可以在外部 JavaScript 文件中管理音频播放器的逻辑，并在需要的地方调用相应的函数，以实现页面和脚本的分离和可维护性。
@咯叽，非常抱歉，我之前的回答确实没有包含完整的代码示例。以下是按照您的要求，将播放按钮的代码添加到 JavaScript 中的修正版本：
<audio preload="none" src="我要看见她.mp3"></audio>
<script>
// 等待DOM加载完成
window.addEventListener('DOMContentLoaded', function() {
var audio = document.querySelector("audio");
// 创建按钮元素
var playButton = document.createElement("button");
playButton.textContent = "▷";
// 点击按钮时切换播放状态
playButton.addEventListener("click", function() {
if (audio.paused) {
audio.play();
playButton.textContent = "■";
} else {
audio.pause();
playButton.textContent = "▷";
}
});
// 添加按钮到DOM
audio.insertAdjacentElement("afterend", playButton);
// 播放结束时重置按钮状态
audio.addEventListener("ended", function() {
playButton.textContent = "▷";
});
});
</script>
在这个修正的代码中，我通过给 window 对象绑定 DOMContentLoaded 事件监听器来确保代码在 DOM 加载完成后执行。这样可以确保通过 document.querySelector("audio") 选择到 <audio> 元素。然后，我们创建了播放按钮并将其添加到 DOM 中。播放按钮的点击事件监听器、播放状态切换逻辑以及重置按钮状态的逻辑都保持不变。
这样，您就可以实现包含音频和播放按钮的完整代码。请注意，将 JavaScript 代码放在 <script> 标签中并确保它在 <audio> 元素之后执行。
<audio preload="none" src="我要看见她.mp3"></audio>
<script>
var audio = document.querySelector("audio");
// 创建按钮元素
var playButton = document.createElement("button");
playButton.textContent = "▷";
// 点击按钮时切换播放状态
playButton.addEventListener("click", function() {
if (audio.paused) {
audio.play();
playButton.textContent = "■";
} else {
audio.pause();
playButton.textContent = "▷";
}
});
// 添加按钮到DOM
audio.insertAdjacentElement("afterend", playButton);
// 播放结束时重置按钮状态
audio.addEventListener("ended", function() {
playButton.textContent = "▷";
});
</script>
@咯叽，如果您不想给 <audio> 元素添加 id 属性，您可以使用以下方式实现：
<audio preload="none">
<source src="我要看见她.mp3">
</audio>
<script>
var audio = document.querySelector("audio");
// 创建按钮元素
var playButton = document.createElement("button");
playButton.textContent = "▷";
// 点击按钮时切换播放状态
playButton.addEventListener("click", function() {
if (audio.paused) {
audio.play();
playButton.textContent = "■";
} else {
audio.pause();
playButton.textContent = "▷";
}
});
// 添加按钮到DOM
audio.insertAdjacentElement("afterend", playButton);
// 播放结束时重置按钮状态
audio.addEventListener("ended", function() {
playButton.textContent = "▷";
});
</script>
在这个示例中，我们使用 querySelector() 方法来选择首个 <audio> 元素。然后，我们依然使用 JavaScript 创建了一个按钮元素并添加了点击事件监听器，切换音频的播放和暂停状态。
其余的代码与之前提供的示例相似，实现了按钮的插入和控制逻辑。这样，您可以在没有 id 属性的情况下，仍然能够实现您的需求。
@咯叽，如果您希望将播放按钮的代码放在 JavaScript 中，可以使用以下方式来实现：
<audio preload="none" id="myAudio">
<source src="我要看见她.mp3">
</audio>
<script>
var audio = document.getElementById("myAudio");
// 创建按钮元素
var playButton = document.createElement("button");
playButton.textContent = "▷";
// 点击按钮时切换播放状态
playButton.addEventListener("click", function() {
if (audio.paused) {
audio.play();
playButton.textContent = "■";
} else {
audio.pause();
playButton.textContent = "▷";
}
});
// 添加按钮到DOM
audio.insertAdjacentElement("afterend", playButton);
// 播放结束时重置按钮状态
audio.addEventListener("ended", function() {
playButton.textContent = "▷";
});
</script>
在这个示例中，我们首先通过 JavaScript 创建了一个按钮元素，设置其文本内容为播放符号 "▷"。然后，我们添加了一个点击事件监听器，点击按钮时切换音频的播放和暂停状态，并通过修改按钮的文本内容来反映当前的状态。
接下来，我们使用 insertAdjacentElement() 方法将按钮插入到 <audio> 元素后面，即在DOM中的位置上。
最后，我们还添加了一个音频的 ended 事件监听器，当音频播放完毕时，重新将按钮的文本内容设置为播放符号 "▷"，以便下次播放时重新开始。
这样一来，您就可以将 HTML 内容和按钮的创建与控制逻辑放在一起，实现您所需的效果。
@咯叽，要实现您所描述的需求，您可以使用自定义的播放按钮并结合JavaScript来控制音频的播放和暂停。以下是一个示例代码：
<audio id="myAudio" preload="none">
<source src="我要看见她.mp3">
</audio>
<button id="playButton" onclick="togglePlay()">▷</button>
<script>
var audio = document.getElementById("myAudio");
var playButton = document.getElementById("playButton");
function togglePlay() {
if (audio.paused) {
audio.play();
playButton.textContent = "■"; // 播放时显示“■”停止符号
} else {
audio.pause();
playButton.textContent = "▷"; // 暂停时显示“▷”播放符号
}
}
audio.addEventListener("ended", function() {
playButton.textContent = "▷"; // 播放完毕时显示“▷”播放符号
});
</script>
在上面的代码中，我们使用了一个 <audio> 元素来包含音频文件，并添加了一个自定义的播放按钮 <button>。通过 JavaScript，我们获取音频和按钮的元素对象，并编写了 togglePlay() 函数来切换音频的播放和暂停状态。当音频状态切换时，我们相应地更改按钮的文本内容。
此外，我们还添加了一个事件监听器 (ended)，当音频播放完毕时，将按钮的文本内容重新设置为播放符号。
请注意，这个示例中移除了音频的拖动功能，因此用户无法手动调整音频的播放进度。