Комментарий: Эта статья в основном представляет пример добавления звуковых эффектов на вашу веб -страницу HTML5. Друзья, которые это нужно, могут ссылаться на это.
Добавление правильного звука к взаимодействию часто улучшает пользовательский опыт. В окнах, с которыми мы знакомы, звук очистки измельченной бумаги в мусорной корзине является хорошим примером.
Вот виджет, который использует HTML5 и jQuery для добавления звуковых эффектов на страницу (просто добавьте звуковые эффекты, а не игрока).
На самом деле, это очень просто, это использовать аудио теги в HTML5 для воспроизведения звуков. Однако, чтобы позаботиться о IE 6-8, я все еще использовал BGSound.
Совместим со всеми основными браузерами (не учитывается не учитывается)
Меньше сплетен, добавьте код:
<a href = "#"> Play </a>
<Скрипт>
/*Играть в звуковой компонент*/
/*
* Профиль: json, {src: 'chimes.wav', altsrc: '', loop: false}
*
* setSrc: функция, установите источник звука
* Играть: функционировать, воспроизводить звук
*/
if (! fui) {
var fui = {};
}
Fui.soundComponent = function (профиль) {
this.profile = {
src: '', // аудиофайл Адрес
ALTSRC: '', // Альтернативный аудиофайл (аудио -форматы, поддерживаемые разными браузерами, отличаются, см. Прилагаемую таблицу)
Loop: false // Пейс -петля, этот параметр сейчас не полезен.
};
if (профиль) {
$ .extend (this.profile, профиль);
}
this.soundobj = null;
this.isie =!-[1,];
/*Этот метод был изобретен предшественником, используя jscript в IE и не-IE для обработки разницы между последней запятой массива,
Однако для IE 9 этот метод недействителен, но мне подходит использовать его, потому что IE 9 поддерживает аудио*/
this.init ();
};
Fui.soundcomponent.prototype = {
init: function () {
this._setsrc ();
},
_setsrc: function () {
if (this.soundobj) {
if (this.isie) {
this.soundobj [0] .src = this.profile.src;
}еще{
this.soundobj [0] .innerhtml = '<source src = "'+this.profile.src+'" />
<source src = "'+this.profile.altsrc+'" /> ';
}
}еще{
if (this.isie) {
this.soundobj = $
('<bgsound volume = "-10000" loop = "1" src = "'+this.profile.src+'">'). appendto ('body');
//-10000-минимальный объем. Сначала переверните громкость до самого низкого уровня, чтобы не издавать звено, как только он загружается, что пугает людей.
}еще{
this.soundobj = $ ('<<audio preload = "auto" Autobuffer>
<source src = "'+this.profile.src+'" />
<source src = "'+this.profile.altsrc+'" />
</audio> '). appendto (' body ');
}
}
},
setSrc: function (src, altsrc) {
this.profile.src = src;
if (typeof altsrc! = 'undefined') {
this.profile.altsrc = altsrc;
}
this._setsrc ();
},
play: function () {
if (this.soundobj) {
if (this.isie) {
this.soundobj [0] .volume = 1; // открыть объем.
this.soundobj [0] .src = this.profile.src;
}еще{
this.soundobj [0] .play ();
}
}
}
};
var sd = new fui.soundcomponent ({src: 'ding.wav', altsrc: 'ding.mp3'});
$ ('. fui-btn'). Bind ('Щип', function (e) {
sd.play ();
});
</script>