Question

我想知道是否有人可以在这里给我一个转向 - 我的想法是空白的。在我的页面上，我有三个按钮，分别用于三种不同的声音（使用JavaScript）。我要做的就是拥有这三个按钮，然后是一个播放所选声音的按钮 - 如果再次点击，则停止它。

我可以在Flash中完成，但我在HTML5中有点难过！

更新

嗨大家好 - 感谢回复..这是我到目前为止所使用的：

<div data-role="controlgroup" data-type="horizontal">
    <audio loop id="8000">
        <source src="8000.mp3">
    </audio>
    <button onclick="document.getElementById('8000').play()">16kHz</button>
    <audio loop id="18000">
        <source src="18000.mp3">
    </audio>
    <button onclick="document.getElementById('18000').play()">18kHz</button>
    <audio loop id="20000">
        <source src="20000.mp3">
    </audio>
    <button onclick="document.getElementById('18000').play()">20kHz</button>
</div>
<div data-role="controlgroup" data-type="horizontal">
    <button class="ui-body-b" onclick="document.getElementById('8000').pause(); document.getElementById('8000').currentTime = 0;" >Stop Playing</button>

这很有用但我想让按钮选择要播放的声音（实际上不播放它）然后有一个很大的播放声音按钮......

Answer 1

在我看来，您的问题与音频无关，而是如何实现按钮以获得您想要的效果。你说你发布的代码有效，所以播放和暂停在你的音频元素上正常工作。但是3个按钮正在启动3种不同的声音，最后一个按钮会停止当前正在播放的任何声音，而您想要使用3个按钮之一选择声音，并使用最后一个按钮播放/暂停所选声音。

如果你有一个变量来存储最后点击的声音选择按钮的id，那么使用最后一个按钮在调用play（）和pause（）之间切换......

<!DOCTYPE html>
<html>
<header>
<script type="text/javascript">
    var selSound = 8000; //default to first sound.
    var play = false; //default to paused.

    function selectSound(id) {
        selSound = id;
    }

    function togglePlay() {
        var a = document.getElementById(selSound);
        var b = document.getElementById("playbtn");
        play = !play;
        if (play) {
            b.value = "Stop Playing";
            a.play();
        }
        else {
            b.value = "Start Playing";
            a.pause();
        }
    }
</script>
</header>
<body>
    <div data-role="controlgroup" data-type="horizontal">
        <audio loop id="8000">
            <source src="8000.mp3">
        </audio>
        <button onclick="selectSound('8000')">16kHz</button>
        <audio loop id="18000">
            <source src="18000.mp3">
        </audio>
        <button onclick="selectSound('18000')">18kHz</button>
        <audio loop id="20000">
            <source src="20000.mp3">
        </audio>
        <button onclick="selectSound('18000')">20kHz</button>
    </div>
    <div data-role="controlgroup" data-type="horizontal">
          <button id="playbtn" class="ui-body-b" onclick="togglePlay()" >Start Playing</button>
    </div>
</body>
</html>

这里前3个按钮只是将变量selSound设置为'8000'，'18000'或'20000'，然后当你按最后一个按钮播放声音时，selsound变量用于识别音频的id它将使用的元素。首先点击将播放声音，下一次点击将停止播放，它将继续来回切换。

虽然这还不完整，但我没有测试过，所以它甚至可能无法完全运行。但是，您可能希望播放/暂停按钮在声音播放完毕后切换回“开始播放”。否则你将点击播放，所选的声音将播放并最终停止，但按钮仍将显示“停止播放”，然后当你点击它时，它将切换为说“开始播放”，然后你必须点击它再次开始播放样本。因此，您可能希望在声音停止时捕获事件并将按钮切换回“开始播放”。

HTH

HTML5 - 播放音频

1 个答案: