使用JavaScript控制HTML中的mp3播放

Question

我正在尝试通过点击事件来控制 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 的初学者。

Answer 1

您的脚本中有一些错误...让我们看看：

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

您的代码有一些更正：

<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>

使用JavaScript控制HTML中的mp3播放

Using JavaScript to control mp3 playback in HTML

html

javascript

audio

script-tag