不要使用JS音频随机声音
不要使用JS音频随机声音
提问于 2018-01-04 23:55:42
我正在创建音频按钮。当我们点击按钮时，声音将开始，我们将再次单击停止它。当我们按下按钮时，我想要随机不间断的声音。我创建了一个示例JS，但是当声音结束时，声音不会自动改变。
我最近尝试了下面的代码。当我使用这段代码时，按钮开始发出声音( we键)，声音正在改变(we键)，但是当我们暂停单击时，声音并没有停止。声音变了，当我们再次点击时声音又变了。我该试试哪种方法？
var sounds = new Array();
sounds[0]="http://static1.grsites.com/archive/sounds/background/background001.mp3";
sounds[1]="http://static1.grsites.com/archive/sounds/background/background002.mp3";
sounds[2]="http://static1.grsites.com/archive/sounds/background/background003.mp3";
sounds[3]="http://static1.grsites.com/archive/sounds/background/background004.mp3";
sounds[4]="http://static1.grsites.com/archive/sounds/background/background005.mp3";
document.getElementById("playpause").addEventListener("click", function getRandomSounds(){
var audio = document.getElementById('testAudio');
var randomNum = Math.floor(Math.random() * sounds.length);
document.getElementById("testAudio").src = sounds[randomNum];
if(this.className == 'is-playing'){
this.className = "";
this.innerHTML = "Pause"
audio.pause();
}else{
this.className = "is-playing";
this.innerHTML = "Play";
audio.play();
}
document.getElementById("testAudio").addEventListener("ended", getRandomSounds);
getRandomSounds();
}); <html>
<body>
<input type="checkbox" value="None" id="playpause" name="check" />
<label for="playpause" tabindex=1></label>
<audio id="testAudio"></audio>
</body>
</html>
尝试删除以下代码：
document.getElementById("testAudio").addEventListener("ended",
getRandomSounds);回答 2
Stack Overflow用户
回答已采纳
发布于 2018-01-05 01:57:04
看起来你的解决方案有一些逻辑上的问题。最大的原因是混淆了复选框和标签引用元素(所以我简化为一个按钮)，您使用相同的事件进行播放/暂停，就像查询下一个项目一样。因此，一旦它试图排队，它也会暂停。
<html>
<body>
<input type="button" value="Play" id="playpause">
<audio id="testAudio"></audio>
</body>
</html>
var sounds = new Array();
sounds[0] = "http://static1.grsites.com/archive/sounds/background/background001.mp3";
sounds[1] = "http://static1.grsites.com/archive/sounds/background/background002.mp3";
sounds[2] = "http://static1.grsites.com/archive/sounds/background/background003.mp3";
sounds[3] = "http://static1.grsites.com/archive/sounds/background/background004.mp3";
sounds[4] = "http://static1.grsites.com/archive/sounds/background/background005.mp3";
document.getElementById("playpause").addEventListener("click", function() {
var audio = document.getElementById('testAudio');
var doPlay = this.className != 'is-playing' && audio.src != null;
if (audio.src == null) {
getRandomSound();
}
if (this.className == 'is-playing') {
this.className = "";
this.value = "Play"
audio.pause();
} else if(doPlay) {
this.className = "is-playing";
this.value = "Pause"
audio.play();
}
document.getElementById("testAudio").addEventListener("ended", getRandomSounds);
});
function getRandomSound() {
var audio = document.getElementById('testAudio');
var randomNum = Math.floor(Math.random() * sounds.length);
document.getElementById("testAudio").src = sounds[randomNum];
audio.play();
};我还在这里更新了它，以便暂停只是一个暂停，并且在您正在播放的歌曲结束之前不会更改所选的音轨。我不确定这是否是你想要的，但根据描述，我猜这就是你想要的。否则，这是一个简单的编辑，去一个新的轨道上的每一个新的开始。
Stack Overflow用户
发布于 2018-01-05 00:14:29
我在浏览器中播放声音做了相当多的工作，我发现最好的选择是使用声音管理器js。我是从这里开始使用SoundManager2的：http://www.schillmania.com/projects/soundmanager2/demo/template/，我相信还有其他的可以工作的。问题是不同的浏览器有不同的功能和期望，所以为了获得最好的工作场景，您需要使用html5作为备份选项。我可以验证我链接的浏览器是否在Edge、Firefox和Chrome (桌面和移动设备)中工作，但我无法确定其他浏览器是否正常工作。我一直在仓库应用程序中使用它作为音频响应，所以我也可以验证它在正确实现时是否可靠，但是我没有在它或接口上使用播放/暂停。我只是在后台弹奏。
下面是我作为实现示例的设置，如果您最终使用了该示例：
var soundReady = false;
var QueuedSounds = [];
soundManager.setup({
url: '/Scripts/SoundManager/',
// flashVersion: 9, // optional: shiny features (default = 8)
preferFlash: false,
onready: function () {
// Ready to use; soundManager.createSound() etc. can now be called.
soundReady = true;
QueuedSounds.Each(function (s) {
var mysound = soundManager.createSound({
id: 'mySound',
url: s.filename,
autoLoad: true,
autoPlay: true,
onfinish: function () {
this.destruct();
},
volume: 100
});
});
}
});
function PlaySound(filename, mime) {
if (soundObject != null) {
$(soundObject).remove();
soundObject.removed = true;
soundObject = null;
}
if (soundReady) {
var mysound = soundManager.createSound({
id: 'mySound',
url: filename,
autoLoad: true,
autoPlay: true,
onfinish: function () {
this.destruct();
},
volume: 100
});
}
else {
QueuedSounds.push({ filename: filename, mime: mime });
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48105288
复制相关文章
相似问题
腾讯云开发者
