gpt4 book ai didi

html - HTML5-播放音频

转载 作者:行者123 更新时间:2023-12-03 00:20:20 24 4
gpt4 key购买 nike

我想知道是否有人可以在这里指导我-我的想法是空白。在我的页面上,我有3个按钮,分别用于三种不同的声音(使用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>

这工作到一定程度,但我想让按钮选择要播放的声音(而不是实际播放),然后有一个很大的播放声音按钮...

最佳答案

在我看来,您的问题并非与音频真正相关,而是与如何实现按钮以获得所需的效果有关。您说发布的代码有效,因此播放和暂停在音频元素上工作正常。但是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。使用。首先,第一次单击将播放声音,而下次单击将停止声音,并且它将继续来回切换。

但这还不完整,我还没有测试过,因此它可能甚至无法完全正常工作。但是,一旦声音播放完毕,您可能希望将“播放/暂停”按钮切换回“开始播放”。否则,您将单击播放,选定的声音将播放并最终停止,但是该按钮仍将显示“停止播放”,然后单击它时将切换为“开始播放”,然后必须单击它再次开始播放样本。因此,您可能想在声音停止时捕获事件,然后将按钮切换回“开始播放”。

高温超导

关于html - HTML5-播放音频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8977428/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com