Javascript音频在一天中的特定时间播放，并从许多不同的音频中随机选择

Question

我正在为一位朋友开发一个网站，即将应用音频，并设置了这个测试页面以便先找出它。

所以这个想法是在一天中的特定时间（9 - 9.05pm，8.55 - 9am等），如果你刷新页面，一个短的音频片段将播放一次..这个音频片段将从2的选择中随机选择或者3，在那里有一个“空白”轨道，所以有时它会保持沉默。如果您在时间段内再次刷新，则会播放另一个音频。

这是代码..

AUDIO TEST !<br />
<br />
Chapel Bedroom @ 8.55 - 9pm<br />
Amazing Song, woodblocks + blank<br />
<br />
Jenny&#39;s Room @ 9 - 9.05pm<br />
Snow, Still a writer + blank<br />
<br />
Kitchen @ 8.55 - 9am<br />
Goosebumps, Rain, Reservation Piece + blank<br />
<br />
Living Room @ 2.05 - 2.10pm<br />
Flute and hidden voice, peacocks, whiterose + blank
<audio id="amazingsong" preload="auto"><source src="http://sarahboulton.co.uk/audio/Amazing Song.mp3" type="audio/mpeg" /> <source src="http://sarahboulton.co.uk/audio/Amazing Song.ogg" type="audio/ogg" /></audio>

<audio id="woodblocks" preload="auto"><source src="http://sarahboulton.co.uk/audio/woodblocks.mp3" type="audio/mpeg" /> <source src="http://sarahboulton.co.uk/audio/woodblocks.ogg" type="audio/ogg" /></audio>

<audio id="snow" preload="auto"><source src="http://sarahboulton.co.uk/audio/Snow 2016.mp3" type="audio/mpeg" /> <source src="http://sarahboulton.co.uk/audio/Snow 2016.ogg" type="audio/ogg" /></audio>

<audio id="stillawriter" preload="auto"><source src="http://sarahboulton.co.uk/audio/Still A Writer [recording Of Maya Deren].mp3" type="audio/mpeg" /> <source src="http://sarahboulton.co.uk/audio/Still A Writer [recording Of Maya Deren].ogg" type="audio/ogg" /></audio>

<audio id="goosebumps" preload="auto"><source src="http://sarahboulton.co.uk/audio/goosebumps.mp3" type="audio/mpeg" /> <source src="http://sarahboulton.co.uk/audio/goosebumps.ogg" type="audio/ogg" /></audio>

<audio id="rain" preload="auto"><source src="http://sarahboulton.co.uk/audio/rain.mp3" type="audio/mpeg" /> <source src="http://sarahboulton.co.uk/audio/rain.ogg" type="audio/ogg" /></audio>

<audio id="reservation" preload="auto"><source src="http://sarahboulton.co.uk/audio/reservation piece.mp3" type="audio/mpeg" /> <source src="http://sarahboulton.co.uk/audio/reservation piece.ogg" type="audio/ogg" /></audio>

<audio id="flute" preload="auto"><source src="http://sarahboulton.co.uk/audio/flute and hidden voice.mp3" type="audio/mpeg" /> <source src="http://sarahboulton.co.uk/audio/flute and hidden voice.ogg" type="audio/ogg" /></audio>

<audio id="peacocks" preload="auto"><source src="http://sarahboulton.co.uk/audio/peacocks.mp3" type="audio/mpeg" /> <source src="http://sarahboulton.co.uk/audio/peacocks.ogg" type="audio/ogg" /></audio>

<audio id="whiterose" preload="auto"><source src="http://sarahboulton.co.uk/audio/whiterose.mp3" type="audio/mpeg" /> <source src="http://sarahboulton.co.uk/audio/whiterose.ogg" type="audio/ogg" /></audio>
<script>

//CHAPEL BEDROOM

mySounds = [ 'amazingsong', 'woodblocks', 'blank1' ]

  var index = Math.floor(Math.random() * 1000) % mySounds.length;
  var id = mySounds[index];
  var audioElement = document.getElementById(id);

  var currentTime = new Date();
  var hours = currentTime.getHours();
  var minutes = currentTime.getMinutes();

  if (hours == 20 && 55 <= minutes && minutes <= 59) {
     audioElement.play();
  }

</script> <script>

//JENNYS ROOM

mySounds = [ 'snow', 'stillawriter', 'blank1' ]

  var index = Math.floor(Math.random() * 1000) % mySounds.length;
  var id = mySounds[index];
  var audioElement = document.getElementById(id);

  var currentTime = new Date();
  var hours = currentTime.getHours();
  var minutes = currentTime.getMinutes();

  if (hours == 21 && 0 <= minutes && minutes <= 5) {
     audioElement.play();
  }

</script> <script>

//KITCHEN

mySounds = [ 'goosebumps', 'rain', 'reservation', 'blank1' ]

  var index = Math.floor(Math.random() * 1000) % mySounds.length;
  var id = mySounds[index];
  var audioElement = document.getElementById(id);

  var currentTime = new Date();
  var hours = currentTime.getHours();
  var minutes = currentTime.getMinutes();

  if (hours == 8 && 55 <= minutes && minutes <= 59) {
     audioElement.play();
  }

</script> <script>

//LIVING ROOM

mySounds = [ 'flute', 'peacocks', 'whiterose', 'blank1' ]

  var index = Math.floor(Math.random() * 1000) % mySounds.length;
  var id = mySounds[index];
  var audioElement = document.getElementById(id);

  var currentTime = new Date();
  var hours = currentTime.getHours();
  var minutes = currentTime.getMinutes();

  if (hours == 14 && 5 <= minutes && minutes <= 10) {
     audioElement.play();
  }

</script>

以及指向测试页面的链接..

http://sarahboulton.co.uk/tests/audio3.html

所以它在我这边工作，但是我的朋友说这不是为了她而在她身边。我哪里错了？

谢谢 ！

Answer 1

这适用于我（在带有safari和铬的Mac上测试）：

//function to insert autoplay audio
function playFile(fileName){
// append this to the div with id of audio...
$("#audio").append(`<audio autoplay><source src="${fileName}" type='audio/mpeg' /> </audio>`) 
}


//example using jquery onclick
// handle click and add class
$("button").on("click", function(){
  playFile('LINK TO AUDIO FILE GOES HERE')
})

https://jsfiddle.net/o90ghm5s/

它使用jQuery将音频标签插入到打开自动播放的不可见div中。 AFAIK，所有浏览器仍然尊重自动播放。 （省略了时间因为它与问题无关，但如果你只是在正确的时间调用函数它应该工作）

Answer 2

大多数浏览器都不允许您在没有任何用户交互（点击或触摸）的情况下播放音频。我不确定这是否是问题，但你一定要照顾它。