最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

HTML5手机声音提示

来源:http://www.erdangjiade.com/ 沐浴春风 2015-08-21 05:34浏览(1589)

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

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

HTML5手机声音提示
分类:html5 > 音频 难易:中级
查看演示

加我微信,拉你进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();
        }
    });
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/386.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2