HTML5手机声音提示

来源:https://www.sucaihuo.com/js/386.html 2015-08-21 05:34浏览(2519) 收藏

我们在项目中经常需要播放特定的声音,比如有新消息或者在线聊天消息声音提示,今天我们将使用jQuery和HTML5结合示例来制作声音提示,你可以很方便的应用到你的项目中。
HTML5手机声音提示
分类:html5 > 音频 难易:中级
查看演示 下载资源 下载积分: 20 积分

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>你好,朋友!素材火sucaihuo.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();
        }
    });
});
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2