JQuery Função Jquery para executar som

[bigbossbr]

Olá pessoal,

 

Estou precisando criar uma função para executar um som sempre que algo ocorrer, este algo vai depender do que eu definir, tipo, uma atualização, um alerta na tela, algo assim.

Comecei a criar a função, mais não esta funcionando.

 

function soundAlert(typeSound) {

    var typeSoundAlert = null;
    var typeSoundSuccess = null;
    var typeSoundError = null;

    if (typeSound == typeSoundAlert) {
        typeSound = 'https://assets.mixkit.co/sfx/preview/mixkit-software-interface-start-2574.mp3';
    } else if (typeSound == typeSoundSuccess) {
        typeSound = 'https://assets.mixkit.co/sfx/preview/mixkit-alert-quick-chime-766.mp3';
    } else if (typeSound == typeSoundError) {
        typeSound = 'https://assets.mixkit.co/sfx/preview/mixkit-game-show-wrong-answer-buzz-950.mp3';
    }

    var audio = $("<audio />", {
        id: 'notificacao',
        preload: 'auto',
    });
    $("body").append(audio);
    $('#notificacao').html('<source src="' + typeSound + '">');
    $('#notificacao').trigger('play');

};

 

Se eu utilizar somente esta parte do código direto onde quero que execute o som, funciona certinho, mais ai não consigo reaproveitar o código, tenho que ficar copiando e colocando, algo que não acho produtivo.

 

var audio = $("<audio />", {
        id: 'notificacao',
        preload: 'auto',
    });
    $("body").append(audio);
    $('#notificacao').html('<source src="' + typeSound + '">');
    $('#notificacao').trigger('play');

 

Também se eu chamar a função soundAlert() direto no console, ele executa o primeiro if, só que se eu usar soundAlert(typeSoundError) por exemplo, ai informa que typeSoundError is not defined

Alguma sugestão dos universitários?

 

Abraços e obrigado

[bigbossbr]

Conseguir resolver. Podem fechar o tópico

[Rui Guilherme]

@bigbossbr Pública a solução aqui, acredito que vá ser de ajuda para quem tiver algo semelhante. Dai é só marcar sua própria resposta como solução que o tópico é fechado.

[bigbossbr]

@Rui Guilherme Com certeza, foi já não ter postado.

 

Bom, não sei se é  a melhor forma de fazer, postem ai as melhorias que verem que da para fazer, mais segue o código:

 

Função que prega e prepara o áudio para ser executado

 

(function ($) {
    $.extend({
        playMusic: function () {
            return $(
                '<audio class="music-player" autoplay="autoplay" style="display:none;">'
                + '<source src="' + arguments[0] + '" />'
                + '<embed src="' + arguments[0] + '" hidden="true" autostart="true" loop="false"/>'
                + '</audio>'
            ).appendTo('body');
        },
        stopMusic: function () {
            $(".music-player").remove();
        }
    });
})(jQuery);

 

 

Para meu caso, eu criei as constantes que vão guardar só áudios, assim sempre que adicionar um novo áudio ou trocar, eu só mudo em um lugar

 

//Difino a bse URL
const dir_audio = window.location.origin + '/src/assets/audio/';

//Crio as contantes
const alert = dir_audio + 'alert.mp3';
const success = dir_audio + 'success.mp3';
const error = dir_audio + 'error.mp3';

 

Chamo no local que eu quiser que ela toque, tipo depois ou junto com um alert.

 

$.playMusic(success);

 

Caso queira chamar em um botão por exemplo

 

<!-- Só mudar a constante [success] que ira usar no seu botão para chamar o som desejado -->
<button onclick='$.playMusic(success)'>Play</button>