Question

我创建了音频按钮。当我们点击按钮时声音将开始，我们将再次点击停止它。当我们按下按钮时，我想要随机不间断的声音。我创建了一个示例JS，但是当声音结束时，声音不会自动改变。

我最近尝试过以下代码。当我使用此代码时，按钮开始发声（okey），声音正在改变（okey），但是当我们暂停点击时，声音不会停止。当我们再次点击时，声音会发生变化，声音会再次变化。我应该尝试什么样的方法？

＆＃13;

	   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();
   
});

＆＃13;

 <html>
 <body>
  <input type="checkbox" value="None" id="playpause" name="check" />
    <label for="playpause" tabindex=1></label>
 <audio id="testAudio"></audio>
 </body>
 </html>

＆＃13;

尝试删除以下代码：

document.getElementById("testAudio").addEventListener("ended", 
getRandomSounds);

Answer 1

我已经通过浏览器播放声音做了一个合理的数量，我找到的最佳选择是使用soundmanager js。我从这里使用了SoundManager2：http://www.schillmania.com/projects/soundmanager2/demo/template/我确信还有其他的可以工作。问题是不同的浏览器具有不同的功能和期望，因此为了获得最佳工作方案，您需要使用带有flash作为备份选项的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 });
    }

}

Answer 2

您的解决方案似乎存在一些逻辑问题。最大的问题是复选框与标签的引用元素混淆（所以我简化为一个按钮），并且你正在使用相同的事件进行播放/暂停，就像排队下一个项目一样。因此，只要它试图排队一个，它也会暂停。

<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();

   };

我也在这里进行了更新，以便暂停只是暂停，并且不会更改所选曲目，直到您刚刚结束的曲目为止。我不确定这是否属于预期，但根据描述，我猜这是你想要的。否则，它是一个简单的编辑，可以在每个新的开始时转到新的轨道。

不要工作JS音频随机声音

2 个答案: