Динамическое аудио <iframe>встраивание из Soundcloud - PullRequest
0 голосов
/ 03 ноября 2018

Я пытаюсь встроить аудиоплеер из Soundcloud, который я хочу динамически менять изо дня в ночь.

HTML:

<iframe id="song" width="100%" height="20" scrolling="no" frameborder="no" allow="autoplay"></iframe>

JS:

var currentTime = new Date().getHours();
var song = document.getElementById('song');
var source = document.createElement('source');

if (6 <= currentTime && currentTime < 19) {
    source.setAttribute('src', 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/482221002%3Fsecret_token%3Ds-ahwqc&color=%23577c5d&inverse=false&auto_play=true&show_user=true');
    song.appendChild(source);
    song.play();
}
else {
    source.setAttribute('src', 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/482220933%3Fsecret_token%3Ds-dEQ64&color=%23577c5d&inverse=true&auto_play=true&show_user=true');
    song.appendChild(source);
    audio.play();
}

В настоящее время аудиопроигрыватель вообще не отображается на странице. Любая помощь с этим будет принята с благодарностью.

1 Ответ

0 голосов
/ 03 ноября 2018

Вот рабочий пример с jquery. Но кажется, что Soundcloud блокирует этот пример здесь, на Stackoverflow. Но это работает, вот рабочий jsfiddle

А вот пример с чистым javascript и jsfiddle

var currentTime = new Date().getHours();
var song = document.getElementById('song');

if (currentTime >= 24 && currentTime <=6) {
    song.setAttribute('src', 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/482221002%3Fsecret_token%3Ds-ahwqc&color=%23577c5d&inverse=false&auto_play=true&show_user=true');
}
else {
    song.setAttribute('src', 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/482220933%3Fsecret_token%3Ds-dEQ64&color=%23577c5d&inverse=true&auto_play=true&show_user=true');
}
<iframe id="song" scrolling="no" frameborder="no" allow="autoplay"></iframe>

В вашем примере вы создаете элемент <source>, который не имеет смысла. Вы уже получили свой элемент с помощью var song = document.getElementById('song'); Просто возьмите iframe и измените атрибут src в зависимости от времени.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...