Аудиоплеер HTML5. Невозможно изменить элемент src

Я пытаюсь динамически изменять значение src моего аудиоплеера HTML, и по какой-то причине я не могу его изменить, и он застрял на нем. Это мой HTML элемент:Аудиоплеер HTML5. Невозможно изменить элемент src

<audio controls preload="none" style="width:480px;"> 
    <source id="mp3" src="placeholder" type="audio/mp3" /> 
    </audio>

И это мой Javascript:

var tempMp3 = "http://www.someurl.org/somefile.mp3"; 
$("#mp3").attr("src", tempMp3);

Кто-нибудь знает, что нелепая ошибка я здесь делаю?

Приветствия

источник

2015-02-13 Pavel Zagalsky

Возможно, вы пытаетесь изменить элемент перед загрузкой DOM. Можете ли вы показать, где в HTML вы помещаете свой javascript? – ndugger

Я помещаю его в Тело, перед HTML –

Это ваша проблема. См. Ответ @ Ethaan для деталей. – ndugger

код выглядит нормально, может быть, как @Nick Даггер говорит, что вы пытаетесь изменить элемент DOM, когда он не готов но

Нельзя безопасно манипулировать страницей, пока документ не будет готов. jQuery определяет это состояние готовности для вас. Код, включенный внутри $ (document) .ready() будет запускаться только после того, как страница Document Object Модель (DOM) готова для выполнения кода JavaScript. Код включен внутри $ (window) .load (function() {...}) будет запускаться после того, как будет готова вся страница (изображения или фреймы), а не только DOM.

Первый вариант

Попробуйте поместить код внутри этого $(document).ready()

$(document).ready(function() { 
    var tempMp3 = "http://www.someurl.org/somefile.mp3"; 
    $("#mp3").attr("src", tempMp3); 
});

Второй вариант

Другим вариантом может быть место в <script> метки на конце <body> тег

источник

2015-02-13 21:36:24 Ethaan

Хотя, вероятно, решение, '$ (document) .ready' часто злоупотребляют. Кроме того, вы можете объяснить OP *, почему он нуждается в этом? – ndugger

@NickDugger done – Ethaan

Для записи я не рекомендую использовать '$ (document) .ready' и предлагаю запустить javascript в конце тела. – ndugger

-1

После смены источника, убедитесь, что для запуска функции .load() на звуковом элементе, чтобы загрузить изменения.

Пример (предполагается, что идентификатор «аудио» установлен звуковой элемент):

var tempMp3 = "http://www.someurl.org/somefile.mp3"; 
$("#mp3").attr("src", tempMp3); 
$("#audio").load(); 
$("#audio").play();

источник

2015-02-13 21:34:10 Mwr247

Нравится это: $ ("# mp3"). Attr ("src", tempMp3) .load() ;? –

Ouch -2> _ <Что-то не так с этим? Кроме того, если бы он неправильно установил это значение, теперь он обновляется, чтобы вызвать загрузку аудио-элемента вместо Pavel. – Mwr247

@ Решение Ethaan работало для меня .. –

Попробуйте немного простого JavaScript:

var audio=document.getElementById("my_audio_element"); 
audio.src="source.mp3"; 
audio.play();

Это работает для меня. HTML5 Audio по-прежнему неаккуратно и не реализуется одинаково во всех основных браузерах. Если вы пытаетесь заставить его играть на мобильных устройствах, это даже сложнее. Тем не менее, ваш код выглядит хорошо. Надеюсь это поможет!

источник

2015-02-13 21:55:10 Frank

Этот код будет работать, если вы запустите его. Downvoter, объясните ваш downvote! – Frank

Аудиоплеер HTML5. Невозможно изменить элемент src

ответ

Смежные вопросы