Изменить <audio> src с помощью javascript

У меня есть несколько аудиофайлов, которые я хочу передать на основе пользователя. Как мне это сделать? Это то, что у меня есть до сих пор, и это, похоже, не работает.

* UPDATE: Сделано несколько изменений, и теперь он утверждает, что audio.load(); не является функцией. Может ли кто-нибудь сказать мне, почему это так? Код обновляется, чтобы отражать изменения.

JavaScript:

function updateSource(){ 
    var audio = document.getElementById('oggSource');
    audio.src = 
        'audio/ogg/' + 
        document.getElementById('song1').getAttribute('data-value');
    audio.load();
}

HTML:

<audio id="audio" controls="controls">
    <source id="oggSource" src="" type="audio/ogg"></source>
    <source id="mp3Source" type="audio/mp3"></source>
        Your browser does not support the audio format.
</audio>

<ul style="list-style: none">
    <li>Sunday May 27, 2012
        <ul style="display: none">
            <li id="song1" data-value="song1.ogg">
                <button onclick="updateSource();">Item1</button>
            </li>
            <li>Item2</li>
            <li>Item3</li>
        </ul>
    </li>
</ul>

Item2 и Item3 Я хочу воспроизвести другой аудиофайл при нажатии.

Ответы

Ответ 1

Попробуйте этот фрагмент

list.onclick = function(e) {
  e.preventDefault();

  var elm = e.target;
  var audio = document.getElementById('audio');

  var source = document.getElementById('audioSource');
  source.src = elm.getAttribute('data-value');

  audio.load(); //call this to just preload the audio without playing
  audio.play(); //call this to play the song right away
};

<ul style="list-style: none">
  <li>Audio Files
    <ul id="list">
      <li><a href="#" data-value="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga">Death_Becomes_Fur.oga</a></li>
      <li><a href="#" data-value="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4">Death_Becomes_Fur.mp4</a></li>
      <li><a href="#" data-value="http://media.w3.org/2010/11/rrs006.oga">rrs006.oga</a></li>
      <li><a href="#" data-value="http://media.w3.org/2010/05/sound/sound_90.mp3">sound_90.mp3</a></li>
    </ul>
  </li>
</ul>

<audio id="audio" controls="controls">
  <source id="audioSource" src=""></source>
  Your browser does not support the audio format.
</audio>

Ответ 2

Попробуйте следующее:

Заменить:

audio.load();

с:

audio.play();

Ответ 3

Вот как я это сделал, используя React и CJSX (Coffee JSX) на основе решения Vitim.us. Используя componentWillReceiveProps, я смог обнаружить все изменения свойств. Затем я просто проверяю, изменился ли URL между будущими реквизитами и текущим. И вуаля.

@propTypes =
    element: React.PropTypes.shape({
         version: React.PropTypes.number
         params:
             React.PropTypes.shape(
                 url: React.PropTypes.string.isRequired
                 filename: React.PropTypes.string.isRequired
                 title: React.PropTypes.string.isRequired
                 ext: React.PropTypes.string.isRequired
             ).isRequired
     }).isRequired

componentWillReceiveProps: (nextProps) ->
    element = ReactDOM.findDOMNode(this)
    audio = element.querySelector('audio')
    source = audio.querySelector('source')

    # When the url changes, we refresh the component manually so it reloads the loaded file
    if nextProps.element.params?.filename? and
    nextProps.element.params.url isnt @props.element.params.url
        source.src = nextProps.element.params.url
        audio.load()

Я должен был сделать это таким образом, потому что даже изменение состояния или перекраска силы не работало.

Ответ 4

Если вы сохраняете метаданные в теге, используйте атрибуты данных, например.

<li id="song1" data-value="song1.ogg"><button onclick="updateSource()">Item1</button></li>

Теперь используйте атрибут, чтобы получить имя песни

var audio = document.getElementById('audio');
audio.src='audio/ogg/' + document.getElementById('song1').getAttribute('data-value');
audio.load();

Ответ 5

с jQuery:

 $("#playerSource").attr("src", "new_src");

    var audio = $("#player");      

    audio[0].pause();
    audio[0].load();//suspends and restores all audio element

    if (isAutoplay) 
        audio[0].play();

Ответ 6

измените это значение

audio.src='audio/ogg/' + document.getElementById(song1.ogg);

audio.src='audio/ogg/' + document.getElementById('song1');

Ответ 7

var fileUrl = 'http://' + window.location.hostname +"abcd.ogg"; 
document.getElementById('audiotag').src = fileUrl;