HTML5手机声音提示

我们在项目中经常需要播放特定的声音，比如有新消息或者在线聊天消息声音提示，今天我们将使用jQuery和HTML5结合示例来制作声音提示，你可以很方便的应用到你的项目中。

淘建站为您提供更多_html5_音频_html5_音频，在此特别感谢您对我们的支持与厚爱！

HTML

<div id='chatBox'>
    <div id='chat'>
        <ul id='chatMessages'>
            <li>
                <img src="user.gif"/><span>Hello Friends</span>
            </li>
            <li>
                <img src="user.gif"/><span>你好，朋友！sucaiq.com欢迎你.</span>
            </li>
        </ul>
    </div>
    <input type="text" id="chatData" placeholder="Message" />
    <input type="button" value=" 发送 " id="trig" />
</div>

jQuery

$(function() {
    $("#chatData").focus();
    $('<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").click(function() {
        var a = $("#chatData").val().trim();
        if (a.length > 0) {
            $("#chatData").val('');
            $("#chatData").focus();
            $("<li></li>").html('<img src="qq.gif"/><span>' + a + '</span>').appendTo("#chatMessages");
            $("#chat").animate({
                "scrollTop": $('#chat')[0].scrollHeight
            },
            "slow");
            $('#chatAudio')[0].play();
        }
    });
});