——杂言:audio.js结合使用html5的audio组件实现了音频的原位播放功能。虽然项目里已经使用一段时间了,不过我是最近才开始有所接触,惭愧。个人见解若有不对,请帮忙纠正,谢谢。

官方相关链接:
 
基本使用步骤:
1.下载 audio.jsplayer-graphics.gif,   audiojs.swf
2.添加audio.js引用代码
<script src="/audiojs/audio.min.js"></script>
3.添加音频预览初始化js代码
<script>
audiojs.events.ready(function() {
varas = audiojs.createAll();
});
</script>
4.在你需要播放的html页面中添加<audio>标签
<audio src="/mp3/juicy.mp3"preload="auto" />
 
我遇到的:
  • Q1:绑定ajax出来的<audio>对象(存在的现象是:<audio>对象多次绑定时,播放事件失败)
  • Q2:java的fileName和path的编码问题(针对中日文)
  • Q3:关于preload跟加载的效果
 
解决方法:
  • A1:这个我的处理方式是每个audio都检查下src是否相同,相同的则不重新绑定,否则视为新元素。绑定方法见上述步骤3。
  • A2:java处理中日文字符串的乱码问题
  • A3:preload="auto"表示页面载入时音频也同时开始缓冲;preload="none"表示用户点击播放按钮以后音频才开始载入,并缓冲,之后再播放。
 
这里有个注意点: IE(ie7, ie8, ie9, ie10, ie11), safari7.0.1下要求是本地资源,也就是url对应的资源必须是下载好的,不然会加载失败;
        其他浏览器(firefox26.0, chrome31.0, opera12.15),我目前测试,remoteUrl没问题。

关于audio.js的研究的更多相关文章

  1. audio.js – 随时随地,播放 HTML5 的声音

    audio.js是一个HTML5标签的简易包装.但它不仅在支持HTML5的浏览器上能够轻松调用标签,并在不支持HTML5的浏览器上也能通过Flash作为B计划使用.除此之外,audio.js所提供的界 ...

  2. js深入研究之Person类案例

    <script type="text/javascript"> /* 定义一个Person类 */ function Person(name, age) { this. ...

  3. js深入研究之扩展类,克隆对象,混合类(自定义的extend函数,clone函数,与augment函数)

    1.类扩展 /* EditInPlaceField类 */ /* 扩展函数 */ function extend(subClass, superClass) { var F = function() ...

  4. js深入研究之克隆,属性,数组,对象,函数

    代码 <script type="text/javascript"> /* 克隆原型得到对象 */ function clone(object) { function ...

  5. js深入研究之神奇的匿名函数类生成方式

    <script type="text/javascript"> var Book = (function() { // 私有静态属性 ; // 私有静态方法 funct ...

  6. js深入研究之牛逼的类封装设计

    <script type="text/javascript"> var Book = function(newIsbn, newTitle, newAuthor) { ...

  7. js深入研究之函数内的函数

    第一种 function foo() { ; function bar() { a *= ; } bar(); return a; } 第二种 function foo() { ; function ...

  8. js深入研究之类定义与使用

    js可以定义自己的类 很有意思 <script type="text/javascript"> var Anim = function() { alert('nihao ...

  9. 纯CSS实现JS效果研究

    利用CSS3:checked选择器和~配合实现tab切换 效果: 代码: <style> body,div,input,label{ margin:0; padding:0; } #tab ...

随机推荐

  1. python基础12 ---函数模块2

    函数模块 一.sys函数模块详解 1.sys.argv[x] 功能:从程序外部接受参数,接收的参数个数可以是多个,在程序内部sys.argv吧这些外部参数转换成元组的形式,然后以索引x的方式在内部取出 ...

  2. iOS 展示 gif

    gif 图 是多张依次有连续动作的图 顺时间展示的一种动态效果图 .   有的是均匀时间更换下一张  有的 则不是均匀时间变化 1. 那么 对于均匀 时间变化的gif图 比较适合 使用 iOS 系统自 ...

  3. this.Hide()与this.Visible、Application.Exit与this.Close()区别

    首先明确this.Hide()和this.Visible作用完全一样,都是隐藏当前窗体,使其不可见:Application.Exit与this.Close()虽然都有关闭当前应用的作用,但作用不同. ...

  4. web框架之Django<一、初识>

    一.什么是web框架 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞台来做表演. 对于所有的 ...

  5. runtime 实现方法交换 viewwillappear方法

    1.新建分类 #import "UIViewController+swizzling.h"#import <objc/runtime.h> @implementatio ...

  6. MongoDB分片搭建

    环境 $ cat /etc/redhat-release CentOS Linux release 7.0.1406 (Core) $ uname -a Linux zhaopin-2-201 3.1 ...

  7. CDH- 测试mr

    cdh的mr样例算法的jar包在 [zc.lee@ip---- hadoop-0.20-mapreduce]$ pwd /opt/cloudera/parcels/CDH--.cdh5./lib/ha ...

  8. MVC中使用showModalDialog

    1.mvc中使用模态对话框用于修改数据,如果第一次修改过后刷新页面,第二次修改时显示内容依然是第一次修改之前的,这里用js中的Math.Random()解决 Views: <%: Html.Ac ...

  9. 分享知识-快乐自己:Maven 相关原理

    依赖原则:解决模块工程之间的Jar冲突问题 1):情定设定:验证路径最短者优先原则 创建三个工程如下: Hello:并且以来 log4j.1.2.17.jar HelloFriend:依赖了工程 He ...

  10. mysql数据库更新

    在使用mysql数据库的时候,A方使用一个版本,B方在使用一个版本数据库进行开发使用,B方在开发的时候,有新的需求,需要添加表字段和所需要的表.但是A方已经在使用之前的版本数据库并且数据库里面有真实的 ...