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

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

为了运行它:

1. fork 它。
2. 转到文件 dailySong.js
3. 注释第 13 行(将“//”放在第 13 行的开头)
4. 取消第 17 行注释(删除第 17 行开头的“//”)
5. 第 17 行只能在当月的第 18、19 和 20 天播放。

下面的代码片段不起作用，因为它的沙箱太严格了。所以只需转到http://plnkr.co/edit/vzvOD0XIi61qfVAASWub?p=preview如果您想测试它，请按照说明进行操作。

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;

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

<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>