067 607 57 84
МЕНЮ

jQuery: Звукові оповіщення

Створення сайтів Львів

В одному з проектів знадобилося реалізувати звукове повідомлення при настанні деяких подій для того, щоб споживач постійно не дивився в монітор чекаючи текстового повідомлення. Виявилося робиться це досить легко. Все, що необхідно це завантажити кілька аудіо-файлів (можна використовувати і свої), підключити бібліотеку JQuery і оформити все по своєму смаку. Річ дуже корисна і зручна.




JavaScript код:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#chatData").focus();
    //Додаємо HTML5 Audio тег в HTML Body
    $('<audio id="chatAudio"><source src="notify.ogg" type="audio/ogg"><source src="notify.mp3" type="audio/mpeg"><source src="notify.wav" type="audio/wav"></audio>').appendTo('body');
     
    $("#trig").on("click",function(){
        var a = $("#chatData").val().trim();
        if(a.length > 0)
        {
            $("#chatData").val('');
            $("#chatData").focus();
            $("<li></li>").html('<img src="small.jpg"/><span>'+a+'</span>').appendTo("#chatMessages");
            $("#chat").animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow");
            $('#chatAudio')[0].play();
        }
    });
});
</script>
                   

CSS код:

* 
{ 
padding:0px; 
margin:0px; 
}
body
{
font-family:arial;
font-size:13px
}
#chatBox
{
width:400px;
border:1px solid #000;
margin:5px;
}
#chat
{
max-height:220px;
overflow-y:auto;
max-width:400px;
}
#chat > ul > li
{
padding:3px;
clear:both;
padding:4px;
margin:10px 0px 5px 0px;
overflow:auto
}
#chatMessages
{
list-style:none
}
#chatMessages > li > img
{ width:35px;float:left
}
#chatMessages > li > span
{
width:300px;
float:left;
margin-left:5px
}
#chatData
{
padding:5px;
margin:5px;
border-radius:5px;
border:1px solid #999;
width:300px
}
#trig
{
padding: 4px;
border: solid 1px #333;
background-color: #133783;
color:#fff;
font-weight:bold
}
                   

HTML код:

<div id='chatBox'>
    <div id='chat'>
        <ul id='chatMessages'>
            <li>
                <img src="small.jpg"><span>Привіт</span>
            </li>
            <li>
                <img src="small.jpg"><span>Ти ще тут?</span>
            </li>
        </ul>
    </div>
    <input type="text" id="chatData" placeholder="Message" />
    <input type="button" value="Відправити" id="trig" />
</div>