改变<；音频>；src与javascript

我有多个音频文件，我想流根据用户选择。我该怎么做？这就是我目前所拥有的，它似乎不起作用

*更新：做了一些更改，现在它声称

audio.load（）不是一个函数。有人能告诉我为什么吗？代码将更新以反映更改

JavaScript:

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

HTML:


您的浏览器不支持音频格式。

2012年5月27日星期日


项目1

项目2
项目3




Item2
和
Item3
单击它们时，我希望播放不同的音频文件。
更改此设置

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

到

如果要在标记中存储元数据，请使用数据属性，例如

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

试试这个片段


list.onclick=函数（e）{
e、 预防默认值（）；
var-elm=e.target；
var audio=document.getElementById（'audio'）；
var source=document.getElementById（'audioSource'）；
source.src=elm.getAttribute（'data-value'）；
audio.load（）；//调用此函数只预加载音频而不播放
audio.play（）；//调用此命令立即播放歌曲
};

音频文件








您的浏览器不支持音频格式。
试试这个：
替换：

audio.load();

与：

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

下面是我如何使用基于Vitim.us解决方案的React和CJSX（Coffee JSX）实现的。
使用
组件willreceiveprops
我能够检测到每个属性的更改。然后我只是检查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()

我不得不这样做，因为即使是改变状态或强制重画也不起作用。
它似乎仍然不起作用。Firebug说它得到了500，因为它看起来像是在运行
document.getElementById（'song1'）时传递的%5Bobject%20HTMLLIElement%5D
我不确定这意味着什么。FF和Chrome现在说
audio.load（）
不是一个函数。你知道这是为什么吗？@Fourthmeal70发布你的更新代码，这样我们就可以看到问题所在。现在它抱怨
source
为空。因此它甚至无法访问
audio.load（）
Nevermind，
source
为空，因为我在一个地方错放了id。但现在它什么也做不了。Firebug没有显示任何错误，但仍然无法工作。不知道为什么。是的，我在用你的例子。加载文件后，我只需添加
audio.play（）
。现在它播放音乐，但我希望媒体播放器显示出来，因为某些原因它保持隐藏。每个浏览器的播放器用户界面都不同，在safari中我可以看到一个小的黑色播放器。我不确定firefox是否在音频标签中添加了UI，但您可以自己创建播放器UI，并在
player.play（）
player.pause（）
等中添加按钮。。。包括滑块和时间戳，每个浏览器都不一样。这看起来很奇怪，它只在歌曲结束时显示在FF中，但在其他浏览器中从一开始就显示得很好。我自己从来没有制作过播放器UI，但这可能是我尝试做的事情。你必须在加载媒体后播放它<代码>音频。播放
@Derek就是他干的！真不敢相信我居然没想到。现在有没有办法让媒体播放器出现？因为某些原因，它一直隐藏着。看看我下面的评论。我试过了，它确实有效……知道为什么吗？我必须两者兼而有之。它现在可以工作了，但是我怎样才能让媒体播放器出现呢？在那里添加
src=”“
会使其停止工作。Firebug说它得到了一个无效的URI。但是当
src=“”
不在时，它会很好地播放歌曲。不，不，那
src
只是一个例子！你不需要遵循它。我的意思是
控制
。哦！这是我已经拥有的和你的例子之间唯一的区别。我有
控件
，但它仍然没有显示。
audio.load();

audio.play();

 $("#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();

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