javascript - HTML5 音频的 Knockout 自定义绑定(bind)

Question

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

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

据我所知，这必须是具有初始化和更新方法的自定义 knockout 绑定(bind)，并且在初始化时它会检查 DOM 中是否存在任何音频标签，并在没有音频标签的情况下创建一个，并在案例值中播放声音值属性变化。据我所知，我必须在内部订阅值绑定(bind)，但无法确切地知道如何实现它。有人可以帮我吗？

Answer 1

你不需要创建音频标签，你可以只使用 JavaScript audio API如果 observable 发生变化则播放声音:

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 .