3 164 Мы продолжаем радовать вас, дорогие читатели, полезными хаками, которые облегчают жизнь в разработке веб-приложений. И сегодня мы покажем вам, как можно проигрывать звуки уведомлений, используя jQuery.
Реализация такого скрипта очень проста. Нам потребуется jQuery и аудио-тэг из HTML5. Для поддержки HTML5 в Internet Explorer мы использовали библиотеку Modernizer.
JavaScript
Функционал достаточно прост.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#chatData").focus(); //Appending HTML5 Audio Tag in 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"); // Scrolling Adjustment $(<b>"#chat"</b>).animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow"); $('#chatAudio')[0].play(); } }); }); </script> |
HTML
Простой HTML код.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id='chatBox'> <div id='chat'> <ul id='chatMessages'> //Old Messages <li> <img src="small.jpg"/><span>Hello Friends</span> </li> <li> <img src="small.jpg"/><span>How are you?</span> </li> </ul> </div> <input type="text" id="chatData" placeholder="Message" /> <input type="button" value=" Send " id="trig" /> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
* { 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 } |
Вот и все.
