IIS 配置 FTP 网站

 

说明:服务器环境是Windows Server 2008 R2,IIS7.5。


1. 在 服务器管理器 的 Web服务器(IIS) 上安装 FTP 服务

2. 在 IIS管理器 添加FTP网站


端口可以不用默认的,自己设置


身份认证选基本,用户则建议添加一个专门用来登录ftp的用户,然后指定给这个用户授权

3. 配置防火墙规则

新增入站规则 

注意:这里要添加的端口是刚刚添加FTP网站时候填写的那个端口。为一般VPS只会开放少量需要用的端口,所以我们要检查,如果这个端口没有对外开放的话,从外部是访问不了的

理论上到这里是全部设置都配好了。从内部用浏览器输入 ftp://ip:端口 可以直接访问,但是外网一直不行,用FTP客户端软件FileZilla连上去则是无法读取目录。网上找了搜了好久,终于找到了解决办法。

在防火墙界面,点击“允许应用或者功能通过Windows防火墙”—->允许其他应用—->浏览—->选择 C:\Windows\System32\svchost.exe >—-打开 

勾选上“专用”和“公用”

PS:: 如果不添加应用程序,会在连接FTP后看不到目录。

连接成功! 

H5 音频标签自定义样式修改以及添加播放控制事件

 

说明:

需求要求这个音频标签首先要是可适配移动端浏览器的,音频样式就是参考微信做的。

最终效果如下: 


具体实现

思路:

H5 的 <audio> 标签是由浏览器负责实现默认样式的。所以不同的浏览器样式不一样,有些还不太美观。所以我们一般会去掉默认样式,自己重新写。具体操作是定义 <audio> 的时候去掉 controls 属性,这样就可以隐藏原生的 audio, 然后就可以加上自己写的 html + css 代码了。最后用 js 捕获 audio 对象,为它添加各种播放控制事件。


1. 定义标签

这个很简单,就是用H5 <audio> 标签定义音频的方式。

html 代码:

<div class="audio-wrapper">
    <audio>
        <source src="Files/Audio/2017-08/e259d760-5f1a-4ae0-a838-34d237ea93cc.mp3" type="audio/mp3">
    </audio>
    <div class="audio-left"><img id="audioPlayer" src="data:image/play.png"></div>
    <div class="audio-right">
        <p style="max-width: 536px;">Beta-B_Kan R. Gao.mp3</p>
        <div class="progress-bar-bg" id="progressBarBg"><span id="progressDot"></span>
            <div class="progress-bar" id="progressBar"></div>
        </div>
        <div class="audio-time"><span class="audio-length-current" id="audioCurTime">00:00</span><span class="audio-length-total">01:06</span></div>
    </div>
</div>

css 代码:

.audio-wrapper {
    background-color: #fcfcfc;
    margin: 10px auto;
    max-width: 670px;
    height: 70px;
    border: 1px solid #e0e0e0;
}

.audio-left {
    float: left;
    text-align: center;
    width: 18%;
    height: 100%;
}

.audio-left img {
    width: 40px;
    position: relative;
    top: 15px;
    margin: 0;
    display: initial;   /* 解除与app的样式冲突 */
    cursor: pointer;
}

.audio-right {
    margin-right: 2%;
    float: right;
    width: 80%;
    height: 100%;
}

.audio-right p {
    font-size: 15px;
    height: 35%;
    margin: 8px 0;

    /* 歌曲名称只显示在一行,超出部分显示为省略号 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 243px;   /* 要适配小屏幕手机,所以最大宽度先设小一点,后面js根据屏幕大小重新设置 */
}

.progress-bar-bg {
    background-color: #d9d9d9;
    position: relative;
    height: 2px;
    cursor: pointer;
}

.progress-bar {
    background-color: #649fec;
    width: 0;
    height: 2px;
}

.progress-bar-bg span {
    content: " ";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: #3e87e8;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -5px;
    margin-left: -5px;
    cursor: pointer;
}

.audio-time {
    overflow: hidden;
    margin-top: -1px;
}

.audio-length-total {
    float: right;
    font-size: 12px;
}

.audio-length-current {
    float: left;
    font-size: 12px;
}

2. 添加播放控制事件

  • 获取音频对象
var audio = $('audio')[0]; 
  • 播放/暂停控制
// 点击播放/暂停图片时,控制音乐的播放与暂停
$('#audioPlayer').click(function () {
    if (audio.paused) {
        // 开始播放当前点击的音频
        audio.play();
        $('#audioPlayer').attr('src', 'image/pause.png');

        // 暂停其他正在播放的音频
        var audios = $('audio');
        for (var i = 0; i < audios.length; i++) {
            if (i != index && !audios[i].paused) {
                audios[i].pause();
                $('#audioPlayer' + i).attr('src', 'image/play.png');
            }
        }
    } else {
        audio.pause();
        $('#audioPlayer').attr('src', 'image/play.png');
    }
});
  • 更新进度条与当前播放时间
// 监听音频播放时间并更新进度条
audio.addEventListener('timeupdate', function () {
    updateProgress(audio);
}, false);

/**
 * 更新进度条与当前播放时间
 * @param {object} audio - audio对象
 */
function updateProgress(audio) {
    var value = audio.currentTime / audio.duration;
    $('#progressBar').css('width', value * 100 + '%');
    $('#progressDot').css('left', value * 100 + '%');
    $('#audioCurTime').html(transTime(audio.currentTime));
}

/**
 * 音频播放时间换算
 * @param {number} value - 音频当前播放时间,单位秒
 */
function transTime(value) {
    var time = "";
    var h = parseInt(value / 3600);
    value %= 3600;
    var m = parseInt(value / 60);
    var s = parseInt(value % 60);
    if (h > 0) {
        time = formatTime(h + ":" + m + ":" + s);
    } else {
        time = formatTime(m + ":" + s);
    }

    return time;
}

/**
 * 格式化时间显示,补零对齐
 * eg:2:4  -->  02:04
 * @param {string} value - 形如 h:m:s 的字符串
 */
function formatTime(value) {
    var time = "";
    var s = value.split(':');
    var i = 0;
    for (; i < s.length - 1; i++) {
        time += s[i].length == 1 ? ("0" + s[i]) : s[i];
        time += ":";
    }
    time += s[i].length == 1 ? ("0" + s[i]) : s[i];

    return time;
}
  • 播放完成时把进度调回开始的位置
// 监听播放完成事件
audio.addEventListener('ended', function () {
    audioEnded();
}, false);

/**
 * 播放完成时把进度调回开始的位置
 */
function audioEnded() {
    $('#progressBar').css('width', 0);
    $('#progressDot').css('left', 0);
    $('#audioPlayer').attr('src', 'image/play.png');
}

3. 添加进度调节事件

  • 点击进度条跳到指定位置播放
    // 点击进度条跳到指定点播放
    // PS:此处不要用click,否则下面的拖动进度点事件有可能在此处触发,此时e.offsetX的值非常小,会导致进度条弹回开始处(简直不能忍!!)
    // 谢谢 @gaoyanfangcsdn 的指出
    $('#progressBarBg' + index).on('mousedown', function (e) {
        // 只有音乐开始播放后才可以调节,已经播放过但暂停了的也可以
        if (!audio.paused || audio.currentTime != 0) {
            var pgsWidth = $('.progress-bar-bg').width();
            var rate = e.offsetX / pgsWidth;
            audio.currentTime = audio.duration * rate;
            updateProgress(audio, index);
        }
    });
  • 拖动进度条到指定位置播放
var dot = document.getElementById('progressDot');

// 鼠标拖动进度点时可以调节进度
// 只有音乐开始播放后才可以调节,已经播放过但暂停了的也可以
// 鼠标按下时
dot.onmousedown = function (e) {
    if (!audio.paused || audio.currentTime != 0) {
        var oriLeft = dot.offsetLeft;
        var mouseX = e.clientX;
        var maxLeft = oriLeft; // 向左最大可拖动距离
        var maxRight = document.getElementById('progressBarBg0').offsetWidth - oriLeft; // 向右最大可拖动距离

        // 禁止默认的选中事件(避免鼠标拖拽进度点的时候选中文字)
        if (e.preventDefault) {
            e.preventDefault();
        } else {
            e.returnValue = false;
        }

        // 禁止事件冒泡
        if (e && e.stopPropagation) {
            e.stopPropagation();
        } else {
            window.event.cancelBubble = true;
        }

        // 开始拖动
        document.onmousemove = function (e) {
            var length = e.clientX - mouseX;
            if (length > maxRight) {
                length = maxRight;
            } else if (length < -maxLeft) {
                length = -maxLeft;
            }
            var pgsWidth = $('.progress-bar-bg').width();
            var rate = (oriLeft + length) / pgsWidth;
            audio.currentTime = audio.duration * rate;
            updateProgress(audio);
        };

        // 拖动结束
        document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
        };
    }
};

最后总的 js 代码如下:

$(document).ready(function () {
    // 控制音频文件名显示宽度
    var maxW = $('.audio-right').width();
    $('.audio-right p').css({
        "max-width": maxW
    });

    initAudioEvent();
});

/**
 * 初始化音频控制事件
 */
function initAudioEvent() {
    var audio = $('audio')[0];

    // 点击播放/暂停图片时,控制音乐的播放与暂停
    $('#audioPlayer').click(function () {

        // 监听音频播放时间并更新进度条
        audio.addEventListener('timeupdate', function () {
            updateProgress(audio);
        }, false);

        // 监听播放完成事件
        audio.addEventListener('ended', function () {
            audioEnded();
        }, false);

        // 改变播放/暂停图片
        if (audio.paused) {
            // 开始播放当前点击的音频
            audio.play();
            $('#audioPlayer').attr('src', 'image/pause.png');

            // 暂停其他正在播放的音频
            var audios = $('audio');
            for (var i = 0; i < audios.length; i++) {
                if (i != index && !audios[i].paused) {
                    audios[i].pause();
                    $('#audioPlayer' + i).attr('src', 'image/play.png');
                }
            }
        } else {
            audio.pause();
            $('#audioPlayer').attr('src', 'image/play.png');
        }
    });

    // 点击进度条跳到指定点播放
    // PS:此处不要用click,否则下面的拖动进度点事件有可能在此处触发,此时e.offsetX的值非常小,会导致进度条弹回开始处(简直不能忍!!)
    $('#progressBarBg' + index).on('mousedown', function (e) {
        // 只有音乐开始播放后才可以调节,已经播放过但暂停了的也可以
        if (!audio.paused || audio.currentTime != 0) {
            var pgsWidth = $('.progress-bar-bg').width();
            var rate = e.offsetX / pgsWidth;
            audio.currentTime = audio.duration * rate;
            updateProgress(audio, index);
        }
    });

    var dot = document.getElementById('progressDot');

    // 鼠标拖动进度点时可以调节进度
    // 只有音乐开始播放后才可以调节,已经播放过但暂停了的也可以
    // 鼠标按下时
    dot.onmousedown = function (e) {
        if (!audio.paused || audio.currentTime != 0) {
            var oriLeft = dot.offsetLeft;
            var mouseX = e.clientX;
            var maxLeft = oriLeft; // 向左最大可拖动距离
            var maxRight = document.getElementById('progressBarBg0').offsetWidth - oriLeft; // 向右最大可拖动距离

            // 禁止默认的选中事件(避免鼠标拖拽进度点的时候选中文字)
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }

            // 禁止事件冒泡
            if (e && e.stopPropagation) {
                e.stopPropagation();
            } else {
                window.event.cancelBubble = true;
            }

            // 开始拖动
            document.onmousemove = function (e) {
                var length = e.clientX - mouseX;
                if (length > maxRight) {
                    length = maxRight;
                } else if (length < -maxLeft) {
                    length = -maxLeft;
                }
                var pgsWidth = $('.progress-bar-bg').width();
                var rate = (oriLeft + length) / pgsWidth;
                audio.currentTime = audio.duration * rate;
                updateProgress(audio);
            };

            // 拖动结束
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        }
    };
}

/**
 * 更新进度条与当前播放时间
 * @param {object} audio - audio对象
 */
function updateProgress(audio) {
    var value = audio.currentTime / audio.duration;
    $('#progressBar').css('width', value * 100 + '%');
    $('#progressDot').css('left', value * 100 + '%');
    $('#audioCurTime').html(transTime(audio.currentTime));
}

/**
 * 播放完成时把进度调回开始的位置
 */
function audioEnded() {
    $('#progressBar').css('width', 0);
    $('#progressDot').css('left', 0);
    $('#audioPlayer').attr('src', 'image/play.png');
}

/**
 * 音频播放时间换算
 * @param {number} value - 音频当前播放时间,单位秒
 */
function transTime(value) {
    var time = "";
    var h = parseInt(value / 3600);
    value %= 3600;
    var m = parseInt(value / 60);
    var s = parseInt(value % 60);
    if (h > 0) {
        time = formatTime(h + ":" + m + ":" + s);
    } else {
        time = formatTime(m + ":" + s);
    }

    return time;
}

/**
 * 格式化时间显示,补零对齐
 * eg:2:4  -->  02:04
 * @param {string} value - 形如 h:m:s 的字符串
 */
function formatTime(value) {
    var time = "";
    var s = value.split(':');
    var i = 0;
    for (; i < s.length - 1; i++) {
        time += s[i].length == 1 ? ("0" + s[i]) : s[i];
        time += ":";
    }
    time += s[i].length == 1 ? ("0" + s[i]) : s[i];

    return time;
}

参考:

音频(audio)自定义样式以及控制操作面板 
HTML5中 audio标签的样式修改


完整代码下载

http://download.csdn.net/download/dandelion_drq/9953681

IIS 配置 FTP 网站 H5 音频标签自定义样式修改以及添加播放控制事件的更多相关文章

  1. H5 音频标签自定义样式修改以及添加播放控制事件

    说明: 需求要求这个音频标签首先要是可适配移动端浏览器的,音频样式就是参考微信做的. 最终效果如下: 具体实现 思路: H5 的 <audio> 标签是由浏览器负责实现默认样式的.所以不同 ...

  2. H5 <audio> 音频标签自定义样式修改以及添加播放控制事件

    H5 <audio> 音频标签自定义样式修改以及添加播放控制事件 Dandelion_drq 关注 2017.08.28 14:48* 字数 331 阅读 2902评论 3喜欢 3 说明: ...

  3. IIS 配置 FTP 网站

    在 服务器管理器 的 Web服务器IIS 上安装 FTP 服务 在 IIS管理器 添加FTP网站 配置防火墙规则 说明:服务器环境是Windows Server 2008 R2,IIS7.5. 1. ...

  4. windows2003通过iis配置ftp服务器

    以前习惯于用filezilla作为windows的ftp服务器,但是现在新版本的filezilla已经不支持windows2003了,所以趁机试一下iis配置ftp服务器. 前面都是很常规的配置 参考 ...

  5. Win7/Win2008下IIS配置Asp网站启用父路径的设置方法(已解决)

    Win7/Win2008下IIS配置Asp网站启用父路径的设置方法(已解决) 在Win7/Win2008下IIS配置Asp网站启用父路径的设置方法与win2003下不同,看看下图就知道了.

  6. Windows2008 IIS配置FTP站点

    视频教程:http://vodcdn.video.taobao.com/player/ugc/tb_ugc_pieces_core_player_loader.swf?version=1.0.2015 ...

  7. win server 2019服务器的iis配置以及网站的简单发布

    1.首先远程连接到服务器 2.打开服务器管理器 3添加角色和功能 4.安装类型:选择基于角色或基于功能的安装  →服务器角色:从服务器池中选择服务器 5.服务器角色选择Web服务器(iis) 6.功能 ...

  8. HTML5中 audio标签的样式修改

    由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,那么要怎么改变这个样式呢,其实它的原理比 ...

  9. IIS配置MVC网站

    我自己随便写了个MVC网站,能够 在vs2010里直接运行.但是加到IIS里之后却显示403.14错误,说是服务器没有启动“目录浏览”或没指定默认的文件. 当然,我没有必要启动“目录浏览”,又因为MV ...

随机推荐

  1. 面试奇遇 -- 原生JS

    最近几日去参加一些面试,多多少少有一些收获. 现将遇到的一些面试题,做一下分析和总结. 1.使用原生JS,不能使用递归,查找dom中所有以“<com-”开头的自定义标签tagName. < ...

  2. Java中的线程安全和非线程安全以及锁的几个知识点

    1. 线程安全就是多线程访问时,采用了加锁机制,当一个线程访问该类的某个数据时,进行保护,其他线程不能进行访问直到该线程读取完,其他线程才可使用.不会出现数据不一致或者数据污染. 线程不安全就是不提供 ...

  3. 如何使用GoEasy实现PHP与Websocket实时通信

    最近搞了搞websocket 做了个简答的聊天demo 1.      从GoEasy获取appkey appkey是验证用户的有效性的唯一标识. Ø  注册账号. GoEasy官网:https:// ...

  4. JS模块之AMD, CMD, CommonJS、UMD和ES6模块

    CommonJS 传送门 同步加载,适合服务器开发,node实现了commonJS.module.exports和require 判断commonJS环境的方式是(参考jquery源码): if ( ...

  5. Android开发——查询/杀死手机里正在运行的进程

    0. 前言 以前有同学好像做过一个叫"自习君"的App,开启后自动检测用户这一天的自习时间,在学校里宣传广告还打了不少.其实实现原理非常简单,在SQlite数据库(也可以通过文件) ...

  6. luogu3157 [CQOI2011]动态逆序对

    先算出一个点前头比它大和后头比它小的数量. 每次删点就扔进一个主席树里头,防止造成重复删答案. #include <iostream> #include <cstring> # ...

  7. PHPTaint-检测xss/sqli/shell注入的php扩展模块[转]

    web渗透者习惯采用黑盒或灰盒的方面来检测一款web应用是否存在漏洞,这种检测方法可以屏蔽不少漏洞,特别是程序逻辑中的漏洞.但如果能配合白盒的源码审计(也可以叫漏洞挖掘),效果将会更好,当然人力成本也 ...

  8. oracle等待事件相关查询

    --------------------------查询数据库等待时间和实际执行时间的相对百分比--------------------- select *   from v$sysmetric a ...

  9. Gym - 100548C The Problem Needs 3D Arrays (最大密度子图)

    TK在大多数 Unix平台.Windows平台和Macintosh系统都是预装好的,TKinter 模块是 Tk GUI 套件的标准Python接口.可实现Python的GUI编程. Tkinter模 ...

  10. 可拔插的 IOC 容器

    可拔插的 IOC 容器 于是我打算自己实现一个这样的 bean 容器. 但在实现之前又想到一个 feature: 不如把实现 bean 容器的方案交给使用者选择,可以选择使用 bean 容器,也可以就 ...