使用 javascript 更改 <audio> src

IT技术 javascript html html5-audio
2021-01-19 19:29:25

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

*更新：做了一些更改，现在它声称这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我将要扮演不同的音频文件，他们点击时。

6个回答

试试这个片段

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/

我意识到每个浏览器都不同。看起来很奇怪，它只在歌曲结束后才出现在 FF 中，但在其他浏览器中从一开始就显示正常。我自己从未制作过播放器 UI，但这可能是我尝试做的事情。
2021-03-22 19:29:25
没关系，source是空的，因为我在一个地方拼错了 id。但现在它什么都不做。Firebug 没有显示任何错误，但仍然无法正常工作。不知道为什么。
2021-04-03 19:29:25
每个浏览器的播放器 UI 都不同，在 safari 中我可以看到一个黑色的小播放器。我不确定 firefox 是否会向音频标签添加 UI，但您可以自己制作播放器 UI，并添加按钮player.play() player.pause()等等......包括滑块和时间戳
2021-04-06 19:29:25
是的，我正在使用您的示例。我只需要audio.play()在加载文件后添加。现在它播放音乐，但我希望媒体播放器出现，由于某种原因它保持隐藏状态。
2021-04-09 19:29:25
现在它抱怨它source是空的。所以它甚至没有到达audio.load()
2021-04-11 19:29:25

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

试试这个：

代替：

audio.load();

和：

audio.play();
我必须同时做这两件事。它现在可以工作了，但是我如何让它显示媒体播放器呢？
2021-03-16 19:29:25
不不不，这src只是一个例子！你不需要遵循它。我的意思是controls。
2021-03-16 19:29:25
2021-03-17 19:29:25
在src=""那里添加使它停止工作。Firebug 说它得到了一个无效的 URI。但是当src=""不在那里时，它会很好地播放歌曲。
2021-04-02 19:29:25
哦！这是我已经拥有的和你的例子之间的唯一区别。我在controls那里，它仍然没有出现。
2021-04-04 19:29:25

以下是我如何使用基于Vitim.us解决方案的React 和 CJSX（Coffee JSX）来做到这一点。使用componentWillReceiveProps我能够检测到每个属性的变化。然后我只检查 url 是否在未来的 props 和当前的 props 之间发生了变化。瞧。

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

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

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

<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();
@Fourthmeal70 发布您更新的代码，以便我们了解问题所在。
2021-03-30 19:29:25
FF 和 Chrome 现在说这audio.load()不是一个功能。你知道这是为什么吗？
2021-04-02 19:29:25
其它你可能感兴趣的问题
上一篇SVG 重新排序 z-index（Raphael 可选） 下一篇HTML5 视频 - 以编程方式显示/隐藏控件