HTML5手机声音提示

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

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>你好，朋友！素材火erdangjiade.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();
        }
    });
});