敲除HTML5音频的自定义绑定

时间:2014-03-05 07:03:19

标签: javascript html5 knockout.js binding

我想要实现的是为Knockout.js创建一个自定义绑定,当该可观察的更改时,它能够使用HTML5音频标签绑定到模型并播放定义的音频文件。所以例如它看起来像

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

据我所知,这必须是自定义的敲除绑定,它具有init和update方法,并且在init上检查是否在DOM中呈现任何音频标签并创建一个以防万一没有音频标签并且在大小写值中播放声音值财产变化。据我所知,我必须在内部订阅价值绑定,但无法准确地了解如何实现它。谁能帮助我呢?

1 个答案:

答案 0 :(得分: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