Comentário: Este artigo apresenta principalmente o exemplo de adicionar efeitos sonoros à sua página da web HTML5. Amigos que precisam podem se referir a ele.
Adicionar o som certo à interação geralmente melhora a experiência do usuário. Nas janelas com as quais estamos familiarizados, o som de limpar o papel desfiado na lixeira é um bom exemplo.
Aqui está um widget que usa HTML5 e JQuery para adicionar efeitos sonoros à página (basta adicionar efeitos sonoros, não um jogador).
De fato, é muito simples, é usar as tags de áudio no HTML5 para reproduzir sons. No entanto, para cuidar do IE 6-8, eu ainda usei o BGSound.
Compatível com todos os navegadores convencionais (não-mainstream não é considerado)
Menos fofocas, adicione o código:
<a href = "#"> reproduzir </a>
<Cript>
/*Jogue componente de som*/
/*
* perfil: json, {src: 'chimes.wav', altsrc: '', loop: false}
*
* setsrc: function, defina a fonte do som
* Play: function, reproduzir som
*/
if (! fui) {
var fui = {};
}
Fui.soundComponent = function (perfil) {
this.profile = {
SRC: '', // Endereço do arquivo de áudio
ALTSRC: '', // Endereço de arquivo de áudio alternativo (os formatos de áudio suportados por diferentes navegadores são diferentes, consulte a tabela anexada)
LOOP: FALSE // se deve jogar loop, este parâmetro não é útil agora
};
if (perfil) {
$ .Extend (this.profile, perfil);
}
this.SoundObj = null;
this.isie =!-[1,];
/*Este método foi inventado por um antecessor, usando JScript no IE e não
No entanto, para o IE 9, esse método é inválido, mas é adequado para mim usá -lo porque o IE 9 suporta áudio*/
this.init ();
};
Fui.soundcomponent.prototype = {
init: function () {
this._setsrc ();
},
_setsrc: function () {
if (this.SoundObj) {
if (this.isie) {
this.SoundObj [0] .src = this.profile.src;
}outro{
this.SoundObj [0] .innerhtml = '<origem src = "'+this.profile.src+'" />
<fonte src = "'+this.profile.altsrc+'" /> ';
}
}outro{
if (this.isie) {
this.SoundObj = $
('<bgsound volume = "-10000" loop = "1" src = "'+this.profile.src+'">'). Appendto ('corpo');
//-10000 é o volume mínimo. Volte o volume para o nível mais baixo primeiro, para não fazer um som de jingle assim que carregar, o que assustará as pessoas.
}outro{
this.SoundObj = $ ('<Audio pré -ad = "Auto" Autobuffer>
<fonte src = "'+this.profile.src+'" />
<fonte src = "'+this.profile.altsrc+'" />
</udio> '). Appendto (' corpo ');
}
}
},
setsrc: function (src, altsrc) {
this.profile.src = src;
if (typeof altsrc! = 'indefinido') {
this.profile.altsrc = altsrc;
}
this._setsrc ();
},
Play: function () {
if (this.SoundObj) {
if (this.isie) {
this.SoundObj [0] .Volume = 1; // Abra o volume.
this.SoundObj [0] .src = this.profile.src;
}outro{
this.SoundObj [0] .Play ();
}
}
}
};
var sd = novo fui.soundComponent ({src: 'ding.wav', altsrc: 'ding.mp3'});
$ ('. fui-btn'). bind ('clique', função (e) {
sd.play ();
});
</script>