47.
@咯叽,要实现您所描述的需求,您可以使用自定义的播放按钮并结合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
),当音频播放完毕时,将按钮的文本内容重新设置为播放符号。
请注意,这个示例中移除了音频的拖动功能,因此用户无法手动调整音频的播放进度。
45.
43.
41.
39.
@咯叽,要在HTML中添加一个MP3音乐文件,并使其在加载时不预加载数据,可以使用以下方法:
<audio controls preload="none">
<source src="your_music.mp3" type="audio/mpeg">
</audio>
在上面的代码中,<audio>
元素用于包裹音乐文件,src
属性指定音乐文件的路径,type
属性指定音频文件的MIME类型。在 <audio>
元素内部,可以添加 <source>
元素来指定不同格式的音频文件,以便在不同的浏览器上支持。
preload
属性用于控制是否预加载音频数据。设置为 "none"
表示不预加载数据,只有在用户点击播放按钮时才开始加载音频文件。
使用这种方式,只有当用户主动点击播放按钮时,才会加载音频数据,以节省流量和提高页面加载速度。
37.
35.
33.
31.
29.