媒体文件audio 转 base64 编码 （利用 FileReader & Audio 对象）

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!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 编码后的声音。

拖动文件到此框中
 

 

posted @   锐洋智能  阅读(6822)  评论(0)  编辑  收藏  举报
编辑推荐：
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
阅读排行：
· Obsidian + DeepSeek：免费 AI 助力你的知识管理，让你的笔记飞起来！
· 分享4款.NET开源、免费、实用的商城系统
· 解决跨域问题的这6种方案，真香！
· 5. Nginx 负载均衡配置案例(附有详细截图说明++)
· Windows 提权-UAC 绕过
历史上的今天：
2013-11-27 淘宝网架构
2013-11-27 Facebook数据库工具Flashcache初探
2013-11-27 flashcache的实现与分析
2013-11-27 淘宝的数据库系统
点击右上角即可分享
微信分享提示