Попытка изменить источник аудио тега с помощью JavaScript

Я гуглил это последние пару недель и прочитал несколько вещей здесь, которые близки к тому, что я пытаюсь сделать, но, так как я не слишком хорош с 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.

Источник

4 ответа

Решение

Обновление v.2

Вторая версия аудиоплеера примет правильно сформированный массив Array Literal и играет основную позицию по отношению к дню месяца. Я включил форму, которая будет принимать релевантные данные для генерации литерала массива для вас.

dailyAudio Player

Плейлист Array Generator

Если у вас уже есть все 31 файл, вам не нужно использовать массив, проще манипулировать двумя цифрами вашего пути к файлам. Убедитесь, что ваша веб-страница и 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. Вилка это.
  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://stackru.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>

Источник

Вы поставили ';' в конце каждой строки?

Источник

@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>
Источник

Сценарий выглядит хорошо (не обязательно в конце каждого оператора, но настоятельно рекомендуется), поэтому у вас могут возникнуть проблемы с расположением mp3-файлов. Они находятся в папке "audio" относительно местоположения скрипта?

Источник
Другие вопросы по тегам