媒体文件audio 转 base64 编码 （利用 FileReader & Audio 对象）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
(function(){
//颜色动画插件 收录 前端网 halcheung 大侠的笔记。网址 http://www.w3cfuns.com/notes/17953/6ceda0bfa4a98d2d1a8c03fb638bae4e.html
// store the jq animate function temporarily
var _anim = $.fn.animate;
// override jq animate function
$.fn.extend({
animate: function (styles, speed, easing, callback) {
if (typeof styles == "object") {
var colorStyles = null,
that = this;
for (var style in styles) {
// init colorStyle object
if (!colorStyles && /color/gi.exec(style)) colorStyles = {};
// get the color styles
if (style == "color") {
colorStyles.color = styles[style];
} else if (style == "background-color" || style == "backgroundColor") {
colorStyles.backgroundColor = styles[style];
} else if (style == "border-color" || style == "borderColor") {
colorStyles.borderColor = styles[style];
} else if (style == "border-top-color" || style == "borderTopColor") {
colorStyles.borderTopColor = styles[style];
} else if (style == "border-right-color" || style == "borderRightColor") {
colorStyles.borderRightColor = styles[style];
} else if (style == "border-bottom-color" || style == "borderBottomColor") {
colorStyles.borderBottomColor = styles[style];
} else if (style == "border-left-color" || style == "borderLeftColor") {
colorStyles.borderLeftColor = styles[style];
}
delete styles[style];
}
// if check color styles positive
if (colorStyles) {
// color animation class
function animColor() {
// color animation function
this.anim = function (colorStyle, targetStyleColor) {
targetStyleColor = formatColor(targetStyleColor);
var currentColor = formatColor($(that).get(0).style[colorStyle]),
step = calcStep(currentColor, targetStyleColor);
changeColor(colorStyle, currentColor, targetStyleColor, step);
};
// color value step of animation
function calcStep(startColor, endColor) {
var maxDiff = -1, animStep = 1;
for (var i = 0; i < 3; i++) {
if (Math.abs(endColor[i] - startColor[i]) > maxDiff) {
maxDiff = Math.abs(endColor[i] - startColor[i]);
}
}
animStep = Math.floor(maxDiff / (speed / 20));
//console.log(maxDiff + "," + speed);
animStep = !animStep ? 1 : animStep;
return animStep;
}
// set the middle frame color of element
function changeColor(colorStyle, middleStyle, toStyle, step) {
middleStyle = changeColorStep(middleStyle, toStyle, step);
$(that).get(0).style[colorStyle] = "rgb(" + middleStyle[0] + "," + middleStyle[1] + "," + middleStyle[2] + ")";
if (middleStyle[0] == toStyle[0] && middleStyle[1] == toStyle[1] && middleStyle[2] == toStyle[2]) {
$(that).get(0).style[colorStyle] = hexColor(middleStyle);
return;
}
setTimeout(function () {
changeColor(colorStyle, middleStyle, toStyle, step);
}, 20);
}
// calculate step color
function changeColorStep(curClr, tgtClr, step) {
for (var i = 0; i < 3; i++) {
if (curClr[i] < tgtClr[i]) {
curClr[i] += step;
if (curClr[i] > tgtClr[i]) curClr[i] = tgtClr[i];
} else if (curClr[i] > tgtClr[i]) {
curClr[i] -= step;
if (curClr[i] < tgtClr[i]) curClr[i] = tgtClr[i];
}
}
return curClr;
}
// convert hex color to rgb color
function formatColor(styleColor) {
if (!styleColor) {
return [0, 0, 0];
} else {
var r = g = b = 0;
if (/^#[a-f0-9]{3}$/gi.exec(styleColor)) {
r = parseInt(styleColor.substr(1, 1) + styleColor.substr(1, 1), 16);
g = parseInt(styleColor.substr(2, 1) + styleColor.substr(2, 1), 16);
b = parseInt(styleColor.substr(3, 1) + styleColor.substr(3, 1), 16);
} else if (/^#[a-f0-9]{6}$/gi.exec(styleColor)) {
r = parseInt(styleColor.substr(1, 2), 16);
g = parseInt(styleColor.substr(3, 2), 16);
b = parseInt(styleColor.substr(5, 2), 16);
} else if (styleColor.toLowerCase().indexOf("rgb") != -1) { // rgb
styleColor = styleColor.toLowerCase().split(/\(|\)/gi)[1].split(',');
r = styleColor[0].trim() * 1;
g = styleColor[1].trim() * 1;
b = styleColor[2].trim() * 1;
}
return [r, g, b];
}
}
// convert rgb color to hex color
function hexColor(rgb) {
var r = ("0" + rgb[0].toString(16)).substr(-2),
g = ("0" + rgb[1].toString(16)).substr(-2),
b = ("0" + rgb[2].toString(16)).substr(-2);
return "#" + r + g + b;
}
} // play color animation
for (var styl in colorStyles) {
var anim = new animColor();
anim.anim(styl, colorStyles[styl]);
anim = null;
}
}
} // most important step: get the original function of jq animate
return _anim.apply(this, [styles, speed, easing, callback]);
}
});
})();
(function(){
$.fn.dragToDrop = function(fun){
var eventStr = "dragleave drop dragenter dragover";
$(document).on(eventStr,function(e){
e.preventDefault(); // 禁用 document 默认行为
});
$(this).on(eventStr,function(e){
e.preventDefault();
var files;
if(e.type == "drop") files = e.originalEvent.dataTransfer.files; //获取文件对象
fun(files);
})
return this;
} })();
(function(){ //列队播放音频文件
var music;
var i = 0;
var flag = false;
var playlist = [];
$.audio = function(data){
playlist.push(data);
//console.log(music)
if(!music || $.type(music) != "object"){
music = new Audio(data);
music.play();
}
$(music).on("play",function(){
flag = false;
});
$(music).on('ended',function(){
if(flag) return;
flag = true;
i++;
if(i >= playlist.length){
music = null;
return;
}
this.src = playlist[i];
this.play();
return;
});
}
})();
(function(){
$.readFileData = function(obj, fun){ //读取文件内容
var reader = new FileReader();//新建一个FileReader
reader.readAsDataURL(obj, "UTF-8");//以base64编码方式读取文件
reader.onload = function(e){
fun(e.target.result);
}
}
$.eachFiles = function(files){ // 遍历文件列表
var obj = $("#look ul").length > 0 ? $("#look ul") : $("<ul>").appendTo($("#look"))
var fileType = "mp3,ogg,wav,mid,midi,wma,asf";
$.each(files, function(i,n){
$.readFileData(n, function(data){
obj.append($("<li>").css({"text-overflow":"ellipsis","white-space":"nowrap"}).text(n.name + " - " + data));
if(fileType.indexOf(n.name.split(".")[1]) > -1) $.audio(data);
});
});
}
Number.prototype.toFormatString = function(n,d){
return (Array(d).join(0) + this.toString(n)).slice(-d);
}
window.rgb = function (a,b,c){
return "#" + a.toFormatString(16,2) + b.toFormatString(16,2) + c.toFormatString(16,2);
}
window.compileString = function(str){
return new Function("return " + str)();
}
window.RBGToHex = function(str){
return compileString(str);
}
window.HexToRGB = function(str){
if(str.length == 4) str = str.replace(/^#([A-Fa-f0-9]{1})([A-Fa-f0-9]{1})([A-Fa-f0-9]{1})/,"$1,$2,$3")
if(str.length == 7) str = str.replace(/^#([A-Fa-f0-9]{2})([A-Fa-f0-9]{2})([A-Fa-f0-9]{2})/,"$1,$2,$3")
var arr = str.split(",");
$.each(arr,function(i,n){
if(n.length == 1){
if(parseInt(n,16) > 0) n += n;
}
arr[i] = parseInt(n,16)
});
return "rgb(" + arr.join(",") + ")";
}
})();
$(function(){
$("#form input[name='fileTrans']").change(function(){
if (!(window.File || window.FileReader || window.FileList || window.Blob)) {
alert('你妈喊你换Chrome浏览器啦');
return;
}
var files = $(this).prop('files');//通过文件域获取到文件列表
if(!files || files.length == 0){
alert('请选择文件');
return;
}
$.eachFiles(files);
}).dragToDrop(function(files){ //通过拖拽获取文件列表
var flieStyle = $("#flieStyle");
if(files && files.length > 0){
$.eachFiles(files);
flieStyle.animate({"border-color":"#000"}, 10, "swing");
return;
}
var color = RBGToHex(flieStyle.css("border-color")) == RBGToHex(HexToRGB("#0ff")) ? "#000" : "#0ff";
//console.log(RBGToHex(HexToRGB(color)))
flieStyle.animate({"border-color":color}, 10, "swing")
});
});
</script>
</head>
<body>
<h1>媒体文件 转 base64 编码</h1>
<div style="font-size:12px;color:gray;margin-bottom:10px;">PS：选择一个或多个文件，如果是音频格式并且您的浏览器支持，便可能会听到 base64 编码后的声音。</div>
<form id="form" >
<div id="flieStyle" style="border:dashed 1px black;background-color:snow;width:150px;height:150px;position:relative;line-height:2rem;font-size:12px;margin:30px auto;">
<input type="file" name="fileTrans" multiple="multiple" style="width:150px;height:150px;position:absolute;opacity:0;background-color:black;">
<span style="text-align:center;width:100%;margin-top:2.5rem;display:block;"><input type="button" value="点击选择文件"><br>拖动文件到此框中</span>
</div>
</form>
<div id="look"></div>
</body>
</html>
媒体文件 转 base64 编码
PS：选择一个或多个文件，如果是音频格式并且您的浏览器支持，便可能会听到 base64 编码后的声音。
拖动文件到此框中
媒体文件audio 转 base64 编码 （利用 FileReader & Audio 对象）的更多相关文章
- php 将图片文件转成base64编码的方法
php 将图片文件转成base64编码的方法<pre><?php /** 文件转base64输出 * @param String $file 文件路径 * @return Strin ...
- 图片文件转换成Base64编码实现ajax提交图片
//上传头像图片 function uploadHead(imgPath) { console.log("imgPath = " + imgPath); var image = n ...
- 使用base64编码把背景添加到CSS文件中
最近博客背景图片的外链挂了,没办法,只好另找办法. 在博客园后台,有一个“文件”菜单,可以上传自己的文件,我就打算把图片传到里面.但却发现了一个很反人性的设置:不允许上传jpg,png文件,允许上传的 ...
- base64编码处理大文件
在做项目的时候遇到需要将文件转为base64编码,并存储在文件中. 在将文件转为base64编码是会将文件读入内存,进行base64编码,输出到文件中.代码入下: FileInputStream st ...
- 减少HTTP请求之将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片(大型网站优化技术)
在网站开发过程中,对于页面的加载效率一般都想尽办法求快.那么,怎么让才能更快呢?减少页面请求 是一个优化页面加载速度很好的方法.上一篇博文我们讲解了 “利用将小图标合成一张背景图来减少HTTP请求”, ...
- java 按字节读写二进制文件（Base64编码解码）
最近在做项目时遇到这样一个需求:依次读取本地文件夹里所有文件的内容,转为JSON,发送到ActiveMQ的消息队列, 然后从MQ的消息队列上获取文件的信息,依次写到本地.常见的文件类型,比如.txt ...
- Java对网络图片/本地图片转换成Base64编码和解码
一.将本地图片转换成Base64编码字符串 /** * 将本地图片转换成Base64编码字符串 * * @param imgFile 图片目录路径 * @return */ public static ...
- delphi将图片转换成Base64编码函数
{************************************************************************** 名称: BaseImage 参数: fn: TF ...
- Atitit. 二进制数据ascii表示法，与base64编码解码api 设计标准化总结java php c#.net
Atitit. 二进制数据ascii表示法,与base64编码解码api 设计标准化总结java php c#.net 1. Base64编码, 1 1.1. 子模式 urlsafe Or url ...
随机推荐
- Linux挂载qcow2格式的镜像
qcow2格式的镜像一般用于KVM/QEMU的hypervisor,当我们需要修改guest host内的一些配置而又不想启动VM时则可以通过挂载guest host进行修改. 需要安装的工具包: l ...
- poj 2253 一条路径中的最大边 再找出最小的
题目大意,有两只青蛙,分别在两个石头上,青蛙A想要到青蛙B那儿去,他可以直接跳到B的石头上,也可以跳到其他石头上,再从其他石头跳到B那儿,求青蛙从A到B的所有路径中最小的Frog Distance,我 ...
- 【PAT】1019 数字黑洞 (20)（20 分）
1019 数字黑洞 (20)(20 分) 给定任一个各位数字不完全相同的4位正整数,如果我们先把4个数字按非递增排序,再按非递减排序,然后用第1个数字减第2个数字,将得到一个新的数字.一直重复这样做, ...
- 洛谷P2398 GCD SUM [数论，欧拉筛]
题目传送门 GCD SUM 题目描述 for i=1 to n for j=1 to n sum+=gcd(i,j) 给出n求sum. gcd(x,y)表示x,y的最大公约数. 输入输出格式 输入格式 ...
- C++ map.insert: pair和make_pair区别
C++ map.insert: pair和make_pair区别 \*********************************\ map<uint32_t, string> tem ...
- svn+apache
参考文章:http://www.ttlsa.com/svn/apache-svn-configure/ http://blog.csdn.net/huangshaotian/article/detai ...
- tqdm：Python 进度条
Tqdm 是 Python 进度条库,可以在 Python 长循环中添加一个进度提示信息.用户只需要封装任意的迭代器,是一个快速.扩展性强的进度条工具库. 用法:tqdm(iterator) 代码地址 ...
- [代码审计]云优cms V 1.1.2前台多处sql注入，任意文件删除修复绕过至getshell
0X00 总体简介 云优CMS于2017年9月上线全新版本,二级域名分站,内容分站独立,七牛云存储,自定义字段,自定义表单,自定义栏目权限,自定义管理权限等众多功能深受用户青睐,上线短短3个月,下载次 ...
- 项目冲刺Second
Second Sprint 1.各个成员今日完成的任务 蔡振翼:完成管理员界面 谢孟轩:完成用户界面 林凯:完成登录界面 肖志豪:完成主界面 吴文清:创建数据库 刘华强:完成连接数据库,编写查询语句 ...
- XXX on tree
%了发树上莫队 nlognsqrt(n) // luogu-judger-enable-o2 #include<bits/stdc++.h> using namespace std; in ...