html - 绑定(bind) HTML 5 音频源

Question

我有这个绑定(bind)，部分有效。

  <audio controls="controls">
            <source data-bind="attr: { src: selectedItem().audioUrl}" type="video/mp4" />
   </audio>

它可以工作，但是当播放音频时，它只播放它绑定(bind)的第一个 url。因此，当它应该播放不同的音频时，却播放了相同的音频。

尝试过:设置 Preload="none"

我可以看到调试器中的值发生了变化，所以并不是说绑定(bind)没有更新。

我认为问题在于 url 实际上是在页面加载后立即下载的，而不是在用户单击播放按钮时下载的。因此即使更改 src 属性，音频也不会更新。

有办法解决吗？

更新:我通过订阅 selectedItem 并运行这段代码来让它工作:

 function changeAudio() {
    var audio = document.getElementById("audioElement");
    if (audio) {
        audio.load();
        audio.play();
    }
}

Answer 1

您还可以构建一个 custom binding handler :

ko.bindingHandlers.audio = {
    update: function(element, valueAccessor) {
        var value = ko.unwrap(valueAccessor());
        if (value) {
            element.src = value;
            element.load();
            element.play();
        }
    }
};

参见 http://jsfiddle.net/9vpxcjws/