用于 HTML5 音频的 Knockout 自定义绑定答案

【问题标题】：Knockout custom binding for HTML5 audio用于 HTML5 音频的 Knockout 自定义绑定
【发布时间】：2014-03-05 07:03:18
【问题描述】：

我想要实现的是为 Knockout.js 创建一个自定义绑定，当该 observable 发生变化时，它可以使用 HTML5 音频标签绑定到模型并播放定义的音频文件。所以例如它看起来像

<p data-bind="audio: {value: someobservable, sound:'pathto/sound.mp3'}"><?p>

据我了解，这必须是自定义敲除绑定，它具有 init 和 update 方法，并且在 init 时，它会检查 DOM 中是否存在任何音频标签，并在没有音频标签的情况下创建一个，并在情况下播放声音值属性变化。据我了解，我必须在内部订阅值绑定，但无法确切知道如何实现它。有人可以帮我吗？

【问题讨论】：

你读过the Knockout documentation about creating a custom binding吗？它包含您可以查看的示例。另外，请编辑您的问题并添加您尝试过的内容以及您在尝试中遇到的错误。
确定我之前创建了很多绑定，唯一的问题与音频绑定有关。我不是要代码，我想要的只是方向或有关如何使用 html5 音频的一些提示？我应该使用 jQuery 吗？
为什么要动态创建音频标签？为什么不创建一个自定义绑定，将其放在现有的音频标签上，当可观察对象发生变化时播放文件？

标签： javascript html knockout.js binding

【解决方案1】：

你不需要创建音频标签，你可以使用JavaScript audio API在可观察的变化时播放声音：

ko.bindingHandlers.audio = {
    init: function (element, valueAccessor) {
        var config = ko.unwrap(valueAccessor());
        var file = config.sound;
        var observable = config.value;
        observable.subscribe(function () {
            var audio = new Audio(file);
            audio.play();
        });
    }
};

你可以在你的问题中使用它：

<p data-bind="audio: {value: someobservable, 
                 sound:'http://www.w3schools.com/TAGs/horse.ogg'}">SOme test</p>

演示JSFiddle.

【讨论】：

即使我没有要求具体的代码实现 var observable = config.value; observable.subscribe(function () { var audio = new Audio(file); audio.play(); });这是我正在寻找的代码。我唯一的问题是这种性能如何，如果它经常触发，它对性能有很大影响吗？它是跨浏览器解决方案吗？
每次someobservable 更改或整个配置更改时都会触发。每个支持音频标签的浏览器都应该支持它：caniuse.com/audio
由于某种原因它在 IE (v11) 中不起作用。我会努力找出答案的。
可能是格式问题，或者 IE 不喜欢播放来自不同域的声音...我可以访问访问被拒绝。错误。或者它可能是 JSFiddle 的问题......或者你是否也在本地遇到这个问题？
所以问题与文件扩展名有关，我将其更改为 .mp3 并且一切正常