金沙澳门官网网址_金沙国际登陆

欢迎加入金沙澳门官网网址体验更多不一样的精彩.,金沙国际登陆提供最丰厚回馈!,因为金沙澳门官网网址这里的游戏是多种多样的,为大家打造一个最专业的化的超级五星酒店。

金沙澳门官网网址 > 金沙澳门官网网址 > 和煦做的叁个登录注册留言板的分界面未兑现效

原标题:和煦做的叁个登录注册留言板的分界面未兑现效

浏览次数:113 时间:2019-11-06

 

MAIN结构

使用html5音频背景

直到现在,仍然不存在一项旨在网页上播放音频的标准。今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 audio 元素来包含音频的标准方法,audio 元素能够播放声音文件或者音频流。

一、在app.module.ts模块中,注入JsonpModule模块

import {JsonpModule} from "@angular/http";

@NgModule({
    imports: [
        JsonpModule    //注入JSonpModule模块
    ]
})

////

音频格式

当前,audio 元素支持Ogg Vorbis,Mp3,Wav这三种音频格式,这是音频格式浏览器支持情况如下:

音频格式  IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis    
MP3    
Wav    

 

 

 

 

二、创建服务httpService,并注入jsonp和map(分装好的服务 可以直接调用)

import {Injectable} from '@angular/core';
import {Jsonp, URLSearchParams} from "@angular/http";

@Injectable()
export class HttpService {

    private jsonpTimes = 0;   // 用于记录jsonp请求的次数

    constructor(private jsonp: Jsonp) {

    }

    jsonpGet(apiURL, req){
        let params = new URLSearchParams();
        //设置参数
        for (let key in req) {
            params.set(key, req[key]);
        }
        params.set('format', 'json');
        params.set("callback", `__ng_jsonp__.__req${this.jsonpTimes}.finished`);
        this.jsonpTimes++;

        let request = this.jsonp.get(apiURL, { search: params })
            .map((res) => {
                let response = res.json();
                return response;
            });
        return request;
    }

}

 

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Main.master.cs" Inherits="Main" %>

使用audio元素实现音频播放

audio元素的controls 属性供添加播放、暂停和音量控件,<audio> 与 </audio> 之间插入的内容是供不支持audio 元素的浏览器显示的,source 元素可以链接不同的音频文件,解决浏览器兼容音频格式问题,下面使用了二个source元素实现上面五个浏览器都能播放该音频。简单代码如下:

<audio controls="controls">该浏览器不支持该格式音频的播放
    <source src="../videoAudio/1.mp3"></source>
    <source src="../videoAudio/1.wav"></source>
</audio>

三、业务组件调用httpService

let newUrl = localServer + "/search"; //查询网址 

let req = { id: 123, name: "abc" }; //查询参数

this.httpService.jsonpGet(newUrl, req).subscribe(data => {
            let result = data.data;
        });

 

<!DOCTYPE html>
<html xmlns=";
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<style>
body { padding-top: 70px;line-height:1.75em;font-family:"Helvetica Neue", Helvetica, "Microsoft Yahei", Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif; }
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="btn btn-default btn-sm">全部</span>
<span class="sr-only">导航</span>
</button>
<a class="navbar-brand" href="/">***群众留言板</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"> <a href="Login.aspx">首页</a></li>
<li class="active"> <a href="Message.aspx">留言</a></li>
<li class="active"> <a href="ViewMessage.aspx">历史与更改</a></li>
</ul>

使用Dom进行操作audio

使用自定义的按钮实现controls属性的播放与暂停功能,代码如下:

        <button onclick="controlPlay()">播放/停止</button>
        <audio id="vioce" >该浏览器不支持该格式音频的播放
            <source src="../videoAudio/1.mp3"></source>
            <source src="../videoAudio/1.wav"></source>
        </audio>
        <script>
            var voice =document.getElementById("vioce");
            function controlPlay(){
                if(voice.paused){//判断是否停止了
                    voice.play();//播放
                } else{
                    voice.pause();//停止
                }
            }
        </script>                

后端JAVA代码

@RequestMapping(value = "mergeJson")
     public void exchangeJson(HttpServletRequest request,HttpServletResponse response)  throws Exception {  
              String businessnum = request.getParameter("businessnum");
              String paths = request.getParameter("paths");
              List<String>  pathList =  Arrays.asList( paths.split(","));  

              List<String> resultPath = mergeService.merge(businessnum, pathList);
              String return_JSONP = String.join(",", resultPath);
              String jsonCallback = request.getParameter("callback"); //jsonpCallback 客户端请求参数  
              Map<String,Object> map = new HashMap<>();
              map.put("data",return_JSONP);
              JSONObject resultJSON = new JSONObject(map);//根据需要拼装json  

              PrintWriter pw = response.getWriter();
              pw.write(jsonCallback+"("+resultJSON+")");  
              pw.close();
              pw = null;
        }  

 

参考资料:

 

</div>
<!-- /.navbar-collapse -->
</div>
</nav>
<div class="container" id="Content">
<asp:ContentPlaceHolder ID="Contents" runat="server">
</asp:ContentPlaceHolder>

音频格式转化(将Wav格式转换成MP3格式)

1.首先下载ffmpeg,输入网址www.ffmpeg.org(开源网址),进入windows中进行下载windows版本的文件。

2.解压ffmpeg压缩文件(以ffmpeg-20180803-5aeb3b0-win32-static.zip为例),再环境变量path中增加ffmpegbin目录的路径(G:mydeveloperapplicationhbuilderhtml5ffmpeg-20180803-5aeb3b0-win32-staticbin)。

3.环境变量设置好后,然后在DOS命令窗体中键入ffmpeg,测试是否可运行。

  1. 在DOS命令窗体中 切换到mp3音频文件就在的目录,最后键入ffmpeg -i 1002_c.wav -f mp3 -acodec libmp3lame -y 2.mp3(这里是将1002_c.wav装换成2.mp3)。

5.ffmpeg其他音频格式的转换以及常用命令,请参考,。

</div>
<div id="footer" class=" container panel">
<div class="panel-body" style="color: #ddd;">
<p class="text-muted">(C) ****科技有限公司,新手指南</p>

</div>
</div>
<script src="JS/jquery-1.11.0.min.js"></script>
<script src="JS/bootstrap.min.js"></script>
<asp:ContentPlaceHolder ID="Scripts" runat="server">
</asp:ContentPlaceHolder>
<!--[if lte IE 8]>
<script type="text/javascript" src="js/bootstrap-ie.js"></script>
<script type="text/javascript">
if (confirm("您目前使用的浏览器版本过低,存在着严重的漏洞,建议您升级您的浏览器。n您是否需要了解升级浏览器相关的内容?")) {
this.location = "ErrorPage/ie.html";
} else {
alert("您现在使用的是兼容模式。n可能无法正确显示页面,我们强烈建议您升级您的浏览器。n升级请按F5");
}
</script>
<![endif]-->
</body>
</html>

登陆界面

金沙澳门官网网址 1

//

 

<%@ Page Title="" Language="C#" MasterPageFile="~/Main.master" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Contents" Runat="Server">
<div class="col-md-5 col-md-offset-5">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
登录</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-md-2 control-label">
账户</label>
<div class="col-sm-10">
<input name="LoginName" type="text" class="form-control" id="inputEmail3" placeholder="用户名"/>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-md-2 control-label">
密码</label>
<div class="col-sm-10">
<input name="Password" type="password" class="form-control" id="inputPassword3" placeholder="密码"/>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"/>
记住密码
</label>

本文由金沙澳门官网网址发布于金沙澳门官网网址,转载请注明出处:和煦做的叁个登录注册留言板的分界面未兑现效

关键词:

上一篇:没有了

下一篇:没有了