现在位置首页 / 软件推荐 /正文

Audio.js 基于flash的简单Audio-API封装,方便低端浏览器音乐播放进度显示和设置音量等功能。

作者: 释梵 | 2015年6月3日| 热度:℃ | 评论: |参与:


    基于flash完成的一个音乐播放组件API,不提供UI, 使用代码如下: 


    var i = 0,
        volume = document.getElementById('volume'),
        slide = document.getElementById('slide'),
        slide1 = document.getElementById('slide1'),
        audio = new Audio(),
        mp3s = [
            "http://wayou.github.io/selected/content/songs/na_ge.mp3",
            "http://wayou.github.io/selected/content/songs/dong_tian_de_mi_mi.mp3",
            "http://wayou.github.io/selected/content/songs/lin_yu_yi_zhi_zou.mp3",
            "http://wayou.github.io/selected/content/songs/xun_xun_mi_mi.mp3"
        ];
    document.body.appendChild( audio );
 
    var focus, loadFn = function(){ 
        audio.load( mp3s[0] );
        audio.play();
 
        audio.ontimeupdate = function(e){  
            if( !focus ){
                slide.value = audio.currentTime * 100 / audio.duration;
            }
        };
        audio.onended = function(e){
            switch_mp3();
        }
 
        slide.onfocus = function(){
            focus = true;
        };
        slide.onblur = function(){
            focus = false;
        };
        slide.onchange = function(){
            audio.setPercent( this.value / 100 );
        };
        volume.onchange = function(){
            audio.setVolume( this.value / 100 );
        }
    };
     
    // flash需要额外绑定事件。
    if( window.Audio.flash ){
        audio.onload = loadFn;
    }else{
        loadFn();
    }
 
    function switch_mp3 () {
        i = (i+1) % mp3s.length;
        audio.load( mp3s[i] );
        audio.play();
    }


Demo: http://shy2850.github.io/audio.js/

Github:  https://github.com/shy2850/Audio.js

点击阅读本文所属分类的更多文章: 软件推荐 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询