尝试使用 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

你有没有把';'每行结束？

Answer 2

脚本看起来不错（；不是必须在每条语句的末尾，但强烈建议），因此您可能对 mp3 的位置有疑问。它们是否位于相对于脚本位置的 "audio" 文件夹中？

Answer 3

更新 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 行（将“//”放在第 13 行的开头）
取消注释第17行（删除第17行开头的“//”）
第 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
// 
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>

Answer 4

@zer00ne 这是我的音频播放器代码。我正在使用基础框架：

<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

Trying to change the src of audio tag using javascript

javascript

audio

src

更新 v.2