JQUERY+HTML5 Sound Tips

In Web applications, there are times when you need to play a specific sound, such as a new message or an online chat message sound cue, previously implemented by Flash, and today we will use jquery and HTML5 to combine examples to implement how to bring sound cues into a Web application.

In this example, we are based on a simple web chat app as the background, when the message point "Send" button, the information will appear in the Chat box, and make a sound. This example relies on jquery, and the audio technology that supports HTML5, so what ie6,7,8 can wash and sleep first.

Html

The page body is a chat box #chatbox, composed of the upper part of the chat content area #chat and the next part of the content input operation area, the chat content is displayed in the form of a list in #chatmessages.

1 <DivID= "Chatbox">2   <DivID= "Chat">3     <ulID= "Chatmessages">4       <Li>5         <imgsrc= "User.gif"/><span>Hello Friends</span>6       </Li>7       <Li>8         <imgsrc= "User.gif"/><span>Hello, friend! Helloweba.com welcome you.</span>9       </Li>Ten     </ul> One   </Div> A   <inputtype= "text"ID= "Chatdata"placeholder= "Message" /> -   <inputtype= "button"value= "Send"ID= "Trig" /> - </Div>

Css

We use simple CSS to beautify the HTML.

1 #chatBox{width:400px;Border:1px solid #d3d3d3;margin:50px Auto;}2 #chat{Max-height:220px;overflow-y:Auto;Max-width:400px;}3 #chat > Ul > Li{padding:3px;Clear:both;padding:4px;margin:10px 0px 5px 0px;Overflow:Auto}4 #chatMessages{List-style:None}5 #chatMessages > Li > img{width:35px;float: Left}6 #chatMessages > li > Span{width:300px;float: Left;Margin-left:5px}7 #chatData{padding:5px;margin:5px;Border-radius:5px;Border:1px solid #999;width:300px}8 #trig{Border:1px solid #390;Color:#fff;background:#360;-webkit-border-radius:3px;9 -moz-border-radius:3px;padding:5px 8px;cursor:Pointer}

Jquery

First we need to load the sound file, we use the HTML5 tag <audio>, and pre-load the sound file to the page via source. For audio related knowledge, you can refer to this site article: using the HTML5 audio tag to create a web video player

When the user enters the information in the input box, click the Send button, the message will be inserted into the chat content area, and adjust the height of the chat area scroll bar, while playing sound, see the code and comments.

1$(function(){ 2$ ("#chatData"). focus ();//input box gets focus3$ ('<audio id= "Chataudio" ><source src= "Notify.ogg" type= "Audio/ogg" >4 <source src= "Notify.mp3" type= "Audio/mpeg" ><source src= "Notify.wav" type= "Audio/wav" >5</audio> '). AppendTo (' body ');//Loading sound files6 7$ ("#trig"). Click (function(){8     varA = $ ("#chatData"). Val (). Trim ();//Get what you have entered9     if(A.length > 0){Ten$ ("#chatData"). Val (');//Empty the input box One$ ("#chatData"). focus ();//Get Focus A$ ("<li></li>"). html (' <span> ' +a+ ' </span> ') -. AppendTo ("#chatMessages");//append the input content to the chat area -$ ("#chat"). Animate ({"ScrollTop": $ (' #chat ') [0].scrollheight}, "slow");//Adjust scroll bars the$ (' #chatAudio ') [0].play ();//Play Sound -     } -   }); -});

Finally, do not forget to load the jquery library file in HTML, this is a lot of classmates asked questions, again, if you download the file on the local run do not see the effect, please first check if the jquery library file has been loaded. helloweba.com Thank you for your attention.

JQUERY+HTML5 Sound Tips