屏幕上带有标题的随机音频

Posted 2023-02-25

【中文标题】屏幕上带有标题的随机音频

【英文标题】：Random audio with title on-screen

【发布时间】：2017-11-26 20:09:00

【问题描述】：

我正在尝试加载屏幕（idk JS），它将播放随机声音文件（从数组中选择），文件（.ogg）托管在本地服务器上，并在屏幕上显示标题。 问题来了，怎么做。

【问题讨论】：

您的研究工作是什么？

【参考方案1】：

您的问题不是很清楚，但要做到这一点，您有两种方法：

1.使用 javascript 框架进行前端渲染并生成一个随机数（假设您有 3 个音频文件），如下所示： var random = Math.floor(Math.random() * 3); var audioArray = ['track1','track2','track3']; 每次重新加载后，您都可以像这样更改音频：

audioArray[random] 在 jquery 或 javascript 上

2.服务端渲染

【讨论】：

var BGM = []; BGM[0] = "6.ogg"; BGM[1] = "6.ogg"; BGM[2] = "6.ogg"; BGM[3] = "6.ogg"; BGM[4] = "6.ogg"; BGM[5] = "6.ogg"; var idx = Math.round( Math.random() * 5 ); document.write('<audio autoplay loop> <source src='"+BGM[idx]+"' type="audio/ogg">'); if (idx == 0) document.write('<h1>test0</h1>') else if (idx == 1) document.write('<h1>test1</h1>') else if (idx == 2) document.write('<h1>test2</h1>') else if (idx == 3) document.write('<h1>test3</h1>') else if (idx == 4) document.write('<h1>test4</h1>') else document.write('<h1>test5</h1>')怎么了？

var BGM = []; BGM[0] = "6.ogg"; var idx = Math.round( Math.random() * 5 ); document.write('<audio autoplay loop> <source src='"+BGM[idx]+"' type="audio/ogg">'); if (idx == 0) document.write('<h1>test0</h1>')

它不起作用。音乐不播放，test(number) 不显示

我不明白这个 JS 代码是如何工作的。我不擅长 javascript

我终于修复了代码！ if (idx == 1) document.write('<h1>test1</h1>'); document.write('<audio autoplay loop> <source src='+BGM[idx]+' type="audio/ogg">');这对我有帮助，谢谢你的帮助！！

【参考方案2】：

这是给 jquery 的：

$(document).ready(function()
    $(window).load(function() 
  var data = ['path/to/track1','path/to/track2','path/to/track3','path/to/track4','path/to/track5'];
  var idx = Math.round( Math.random() * 5 ); 
      $(".audio").replaceWith( "<audio class='audio' controls loop><source src='" + data[idx] + " 'type='audio/ogg'></audio>" );
  );
);

这是你的 html ：

<audio class="audio" controls loop>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>