zoukankan      html  css  js  c++  java
  • audio音频

    html5的audio功能上已经非常强大,回放,跳转,缓冲等以前只能用flash才能实现的功能,html5的audio都能轻松搞定

    最近的一个项目使用到了这个功能,把我使用的情况写下来,供大家参考, 因为我需要的功能很简单,所以做的不复杂,如果要使用更多的功能,可以参考下面的api,能实现很多高大上的功能

    audio 相关的 api

    <audio src=”音频的地址”>备用(当浏览器不支持audio时显示的内容)</audio>

    控制函数功能说明

    • load()   加载音频、视频软件,通常不必调用,除非是动态生成的元素,用来在播放前预加载
    • play()    加载并播放音频、视频文件,除非文件已经暂停在其他位置,否则默认重头开始播放
    • pause() 暂停处于播放状态的音频、视频文件

    audio 的只读媒体特性有:

    只读属性属性说明

    • duration   获取媒体文件的播放时长,以s为单位,如果无法获取,则为NaN
    • paused     如果媒体文件被暂停,则返回true,否则返回false
    • ended       如果媒体文件播放完毕,则返回true
    • startTime  返回起始播放时间,一般是0.0,除非是缓冲过的媒体文件,并一部分内容已经不在缓冲区
    • error          在发生了错误后返回的错误代码
    • currentSrc  以字符串形式返回正在播放或已加载的文件,对应于浏览器在source元素中选择的文件

    audio 可脚本控制的特性值:

    • autoplay       自动播放已经加载的的媒体文件,或查询是否已设置为autoplay
    • loop              将媒体文件设置为循环播放,或查询是否已设置为loop
    • currentTime 以s为单位返回从开始播放到目前所花的时间,也可设置currentTime的值来跳转到特定位置
    • controls        显示或者隐藏用户控制界面
    • volume         在0.0到1.0间设置音量值,或查询当前音量值
    • muted           设置是否静音
    • autobuffer     媒体文件播放前是否进行缓冲加载,如果设置了autoplay,则忽略此特性

    对于这些属性,主流的浏览器都支持。可是别以为就没有了兼容性,在音频播放流中,有两个阵营。firefox 和 opera 支持 ogg 音频,safari 和 ie 支持 mp3.幸好Google的chrome都支持。

    <div id="audioControl">  
        <div class="play">  
            <span id="play">Play</span>  
        </div>  
    </div>  
      
    <audio id="media" src="test.mp3"></audio>  
    

      

    var media = $('#media')[0];  
    var audioTimer = null;  
      
    //绑定播放暂停控制  
    $('.play').bind('click', function() {  
        playAudio();  
    });   
      
    //播放暂停切换  
    function playAudio() {  
        if(media.paused) {  
            play();  
        } else {  
            pause();  
        }  
    }  
      
    //播放  
    function play() {  
        media.play();  
        $('#play').html('Pause');  
    }  
      
    //暂停  
    function pause() {  
        media.pause();  
        $('#play').html('Play');  
    }  
    

      原链接:http://blog.csdn.net/alongken2005/article/details/44569981

  • 相关阅读:
    转的。一个C#的问卷!private、 protected、 public、 internal 修饰符的访问权限
    Windows Phone Mango编程实践——第三方MVVM框架
    Windows Phone Mango编程实践——本地数据库
    Windows Phone Mango开发实践——Shake Library应用实例
    Windows Phone Mango开发实践——示例代码更新和提交(2013.09.12)
    《Windows Phone Mango开发实践》终于出版
    《Windows Phone Mango开发实践》即将问世
    Windows Phone Mango开发实践——应用程序生命周期
    Windows Phone Mango开发实践——性能分析工具
    XNA二维游戏的视差背景实现方法
  • 原文地址:https://www.cnblogs.com/huanghuali/p/7531656.html
Copyright © 2011-2022 走看看