Question

我在过去几周一直在谷歌搜索这个，并且已经阅读了几个与我正在尝试的内容相近的内容但是因为我对javascript不太好，所以我很难过弄清楚如何实施它们。

我有一个音频标签，根据当月的日期播放不同的音频文件。因此，当您单击播放时，它应该使用音频播放器播放该特定日期的文件。

这是我的音频标签：

<audio preload="metadata" controls="controls" src="" id="todays" autoplay="none"></audio>

这是我的.js：

function todaywm() {
    var a, dayofmonth
    a = new Date()
    dayofmonth = a.getDate()
    document.getElementById('todays').src = radiolinks[dayofmonth]
}
var radiolinks = new Array(31) 
radiolinks[1] = "audio/day01.mp3"
radiolinks[2] = "audio/day02.mp3"
radiolinks[3] = "audio/day03.mp3"
radiolinks[4] = "audio/day04.mp3"
radiolinks[5] = "audio/day05.mp3"
radiolinks[6] = "audio/day06.mp3"
radiolinks[7] = "audio/day07.mp3"
radiolinks[8] = "audio/day08.mp3"
radiolinks[9] = "audio/day09.mp3"
radiolinks[10] = "audio/day10.mp3"
radiolinks[11] = "audio/day11.mp3"
radiolinks[12] = "audio/day12.mp3"
radiolinks[13] = "audio/day13.mp3"
radiolinks[14] = "audio/day14.mp3"
radiolinks[15] = "audio/day15.mp3"
radiolinks[16] = "audio/day16.mp3"
radiolinks[17] = "audio/day17.mp3"
radiolinks[18] = "audio/day18.mp3"
radiolinks[19] = "audio/day19.mp3"
radiolinks[20] = "audio/day20.mp3"
radiolinks[21] = "audio/day21.mp3"
radiolinks[22] = "audio/day22.mp3"
radiolinks[23] = "audio/day23.mp3"
radiolinks[24] = "audio/day24.mp3"
radiolinks[25] = "audio/day25.mp3"
radiolinks[26] = "audio/day26.mp3"
radiolinks[27] = "audio/day27.mp3"
radiolinks[28] = "audio/day28.mp3"
radiolinks[29] = "audio/day29.mp3"
radiolinks[30] = "audio/day30.mp3"
radiolinks[31] = "audio/day31.mp3"

但我只是无法让它发挥作用。我还在学习javascript。

Answer 1

更新v.2

音频播放器的第二个版本将接受正确形成的Array Literal并播放与该月日相关的相应位置。我已经包含了一个表单，它将接受相关数据以便为您生成数组文字。

dailyAudio Player

Playlist Array Generator

<小时/> 如果您已经拥有所有31个文件，则不需要使用数组，操作文件路径的2位数就更容易了。确保您的网页和mp3文件位于服务器的正确文件夹（目录）中。

示例：

网页位置：http://www.domain.com/path/to/index.html
歌曲日28位置：http://www.domain.com/path/to/audio/day28.mp3
歌曲日1位置：http://www.domain.com/path/to/audio/day01.mp3

这是一个有效的演示：http://plnkr.co/edit/vzvOD0XIi61qfVAASWub?p=preview

为了运行它：

叉子。
转到文件dailySong.js
评论第13行（地点＆＃34; //＆＃34;第13行的开头）
取消注释第17行（删除＆＃34; //＆＃34;第17行开头）
第17行只能在第18天，第19天和第17天播放。本月20日。

下面的代码段不起作用，因为它的沙箱太严格了。因此，只需转到http://plnkr.co/edit/vzvOD0XIi61qfVAASWub?p=preview并按照说明进行测试即可。

＆＃13;

function nowPlaying() {
  var player = document.getElementById('dailySong');
  var obj, dayOfMonth, X;
  obj = new Date();
  dayOfMonth = obj.getDate();
  X = pad(dayOfMonth, 2); //:::::............. This is to ensure that numbers under 10 get that extra 0 padding.
  player.src = "audio/day" + X + ".mp3"; //:::::........This concats X to a string that will be assigned to src
  player.load(); //:::::.................When changing src, you must .load() the player before you can play.
}

// This utility function is to pad numbers less than 10
// https://stackoverflow.com/a/30387967/2813224
function pad(num, len) {
  return '0'.repeat(len - num.toString().length) + num;
}

//When the page has completely loaded, start nowPlaying function.
window.onload = nowPlaying;

＆＃13;

h1 {
  font-size: 2rem;
  color: red;
}

＆＃13;

<audio preload="metadata" controls="controls" src="" id="dailySong" autoplay="none"></audio>
<h1>Do not expect this demo to work, snippets are sandboxed too strictly, follow the directions to test the demo at: <br/><a href="http://plnkr.co/edit/vzvOD0XIi61qfVAASWub?p=preview" target="_blank">http://plnkr.co/edit/vzvOD0XIi61qfVAASWub?p=preview</a></h1>

＆＃13;

Answer 2

你把';'放了在每一行结束？

Answer 3

脚本看起来很好（; 在每个语句的末尾不是强制性的，但强烈推荐），因此您可能对mp3的位置有疑问。它们是否位于相对于脚本位置的“音频”文件夹中？

Answer 4

@ zer00ne这是我的音频播放器代码。我正在使用Foundation Framework：

<div id="todayModal" class="reveal-modal tiny" data-reveal aria-labelledby="todays-broadcast" aria-hidden="true" role="dialog">
    <script type="text/javascript" src="js/today.js"></script>
    <h3 id="todays-broadcast" class="text-center">Today's Broadcast</h3>
    <div class="audio-player"><audio preload="auto" controls="controls" id="todays" src=""></audio></div>
    <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

尝试使用javascript更改音频标记的src

4 个答案:

更新v.2