javascript - 改变src 与 javascript

Question

我有多个要根据用户选择流式传输的音频文件。我怎么做？这是我到目前为止所拥有的，它似乎不起作用。

*更新：进行了一些更改，现在它声称这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我会想要播放不同的音频文件。

Answer 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>

JSFiddle http://jsfiddle.net/jm6ky/2/

Answer 2

使用 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();

Answer 3

试试这个：

代替：

audio.load();

和：

audio.play();

Answer 4

以下是我使用基于Vitim.us解决方案的 React 和 CJSX (Coffee JSX) 的方法。使用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()

我不得不这样做，因为即使改变状态或强制重绘也不起作用。

Answer 5

如果您将元数据存储在标签中，请使用数据属性，例如。

<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();

Answer 6

为那些试图更改源元素的 src 的人找到了这个规范说明。audio.load() 对于像 React 这样导致渲染循环的库特别有用。

..当元素已插入视频或音频元素时修改源元素及其属性将无效。要更改正在播放的内容，只需直接在 media 元素上使用 src 属性

<audio>
    <source src='./first-src'/>
</audio>

更改 src

<audio src='./second-src'/>
    <source src='./first-src'/>
</audio>

Answer 7

改变这个

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

到

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