Я пытаюсь встроить аудиоплеер из 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(); }
В настоящее время аудиопроигрыватель вообще не отображается на странице. Любая помощь с этим будет принята с благодарностью.
Вот рабочий пример с jquery. Но кажется, что Soundcloud блокирует этот пример здесь, на Stackoverflow. Но это работает, вот рабочий jsfiddle
var hour = (new Date()).getHours(); var iframe = $('#iframe'); if (hour >= 24 && hour <=6) { iframe.attr('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 { iframe.attr('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'); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <iframe id="iframe"></iframe>
А вот пример с чистым 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 в зависимости от времени.
<source>
var song = document.getElementById('song');
src