随机音频列表在调用时不播放

Randomised Audio List is not playing when called

本文关键字:播放 调用 音频 列表 随机      更新时间:2023-09-26

功能:

随机音频在游戏页面中播放 25 秒,然后在第 26 秒停止音频。

做了什么:

我为音频文件创建了一个数组列表,一种随机化音频列表的随机方法,最后是播放随机音频。

问题:

音频未播放,并显示以下错误消息;

索引.html:1221 未捕获的类型错误: PlaySound.play 不是一个函数

 var audioList = ["lib/audio/Awesome.mp3", "lib/audio/Excellent.mp3", "lib/audio/Fantastic.mp3", "lib/audio/Great.mp3", "lib/audio/KeepitUp.mp3", "lib/audio/MatchGame.mp3", "lib/audio/MatchSpot1.mp3", "lib/audio/MatchSpot3.mp3"];
 $('#DefaultGamePage').fadeIn({
       duration: slideDuration,
       queue: false,
       complete: function() {
         $('#DefaultGameTimer').show();
         //Play Randomised Audio
         var random_Play Audio = Math.floor(Math.random() * (audioList.length));
         var PlaySound = audioList[random_PlayAudio];
         PlaySound.play();
         ...(other game method)..
       },
       1000)
<div id="GamePage" style="display:none; position:absolute; z-index:20; top:0px; left:0px; width: 1080px; height: 1920px; margin:auto;">
  <audio id="Play"></audio>
</div>

audioList 不是音频元素,而是array,它没有方法play()

AudioElementsrc 属性设置为随机 audion 文件,并对具有 id 的元素使用play()方法作为播放。

试试这个:

var audioList = ["lib/audio/Awesome.mp3", "lib/audio/Excellent.mp3", "lib/audio/Fantastic.mp3", "lib/audio/Great.mp3", "lib/audio/KeepitUp.mp3", "lib/audio/MatchGame.mp3", "lib/audio/MatchSpot1.mp3", "lib/audio/MatchSpot3.mp3"];
var playElem = $('#Play').get(0); //select audio element
var handler = function() {
  var random_PlayAudio = Math.floor(Math.random() * (audioList.length));
  playElem.src = audioList[random_PlayAudio];
  playElem.addEventListener("ended", handler); //on end of the audio, execute `handler` again
  playElem.play();
};
$('#DefaultGamePage').fadeIn({
  duration: slideDuration,
  queue: false,
  complete: function() {
    $('#DefaultGameTimer').show();
    handler();
  }
});
<div id="GamePage" style="display:none; position:absolute; z-index:20; top:0px; left:0px; width: 1080px; height: 1920px; margin:auto;">
  <audio id="Play"></audio>
</div>