使用 JavaScript 控制 HTML 中的 mp3 播放

Using JavaScript to control mp3 playback in HTML

本文关键字：mp3 播放 中的 HTML JavaScript 控制 使用      更新时间：2023-09-26

我正在尝试通过点击事件控制mp3。

<!DOCTYPE html>
<html>
<body>
<audio id="demo" autoplay="true" hidden="hidden">
   <source src="Lute.mp3" type="audio/mpeg">
   Your browser does not support the audio element.
</audio>
<div onmousedown="WhichButton(event)">
  <img src="Birch-Forest.jpg" alt="A birch forest in the fall"
  style="width:600px;height:572px">
</div>
<script>
var playing = false;
function WhichButton(event) {
    if (event.button == 0) {
    document.getElementById('demo').volume-=0.1;
    }
    else if (event.button == 1 && playing) {
    document.getElementById('demo').pause;
    } 
    else if (event.button == 1 && !playing) {
    document.getElementById('demo').play;
    } 
    else if (event.button == 2) {
    document.getElementById('demo').volume+=0.1;
    } 
}
</script>
</body>
</html>

此代码加载图像并开始音频播放，但控件不起作用。我真的不知道我在做什么，只是一个HTML和JavaScript的初学者。

你的脚本中有一些错误...我看看：

  1. 您将playing变量初始化为 false，但您的音频播放器将自动播放设置为 true...所以也许，为了清楚起见，你的变量应该初始化为 true 或重命名为暂停。但是这不是错误:)
  2. pause和play是音频播放器的功能，因此如果要调用它们，则必须使用括号，如下所示： document.getElementById('demo').pause(); .反之亦然，volume是一个属性，因此您不需要括号。
    3. 现在，您希望在暂停时播放音频
  3. ，并在播放时暂停音频。正确地说，你有一个布尔变量（正在播放），但你永远不会改变它的值！

您的代码进行了一些更正：

<script>
var playing = true; // Point 1
var audioPlayer = document.getElementById('demo');
function WhichButton(event) {       
    if (event.button == 0 && audioPlayer.volume > 0) {
        audioPlayer.volume-=0.1;
    }
    else if (event.button == 1 && playing) {
        audioPlayer.pause(); // Point 2
        playing = false; // Point 3
    } 
    else if (event.button == 1 && !playing) {
        audioPlayer.play();
        playing = true;
    } 
    else if (event.button == 2 && audioPlayer.volume < 1) {
        audioPlayer.volume+=0.1;
    }   
}
</script>
相关文章：