欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

音频播放器

程序员文章站 2022-05-21 11:16:16
HTML+JS的音频播放器 Web 上的音频直到现在,仍然不存在一项旨在网页上播放音频的标准。今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同...

HTML+JS的音频播放器
Web 上的音频直到现在,仍然不存在一项旨在网页上播放音频的标准。今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。

<audio src="song.mp3" controls="controls">

</audio>

试着用audio 与 windows media 编写一个多浏览器支持的音频播放器:
Html:

 

<!DOCTYPE HTML>

<html>

 

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <title>WavPlayer</title>

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <link href="public.css" rel="stylesheet" type="text/css" />

  <script language="javascript" type="text/javascript" src="jquery.js"></script>

  <script language="javascript" type="text/javascript" src="WAVplayer_html5.js"></script>

</head>

<body>

 

 

<style>

    .WavPlayer{width:391px;height:66px;background:url(pbg.jpg) 0 0 no-repeat;display:none;}

    .WavPlayer .PlayerBtn{width:67px;height:45px;display:inline;float:left;margin:10px 0 0 10px;}

    .WavPlayer .PlayerBtn span{display:block;cursor:pointer;width:67px;height:45px;background:url(play.jpg) 0 0 no-repeat;}

    .WavPlayer .PlayerBtn span.on{background:url(pause.jpg) 0 0 no-repeat;}

    .WavPlayer .bar{width:178px;height:9px;display:inline;float:left;padding:3px 0px 1px 0px;background:url(bar.jpg) 0 0 no-repeat;margin:26px 0 0 6px;position:relative;cursor:pointer;}

   

    .WavPlayer .leftBar{height:9px;width:4px;display:inline;float:left;}

    .WavPlayer .onPlay .leftBar{background:url(l.gif) top right no-repeat;}

 

    .WavPlayer .rightBar{height:9px;width:3px;display:inline;float:left;}

    .WavPlayer .onPlay .rightBar{background:url(r.gif) 0 0 no-repeat;}

   

    .WavPlayer .playBar{height:9px;width:0;display:inline;float:left;background:url(m.gif) 0 0 repeat-x;}

 

    .WavPlayer .playTime{display:inline;float:left;margin:24px 0 0 8px;font-size:13px;width:38px;overflow:hidden;}

 

    .WavPlayer .downLoad{width:66px;height:47px;display:inline;float:left;background:url(down.jpg) 0 0 no-repeat;margin:9px 0 0 6px;}

 

    .loadPlayer{display:block;margin:20px auto 0;}

 

</style>

 

<p id="WavPlayer" style="width:391px;height:66px;"></p>

 

 

<p id="loadStatus" ></p>

<script>

theWavPlayer({id:'WavPlayer',url:'11.mp3'});

</script>

 

</body>

</html>

 

WAVplayer_html5.js :

 

function WavPlayer(obj){

   

    var node = this;

    node.id = obj.id;

    node.url = obj.url;

    node.downLoad = obj.downLoad || false; //下载按钮绑定方法

    node.box = $('#'+obj.id);

    node.html = '<img src="012.gif" class="loadPlayer" id="'+node.id+'_loading"/><p class="WavPlayer" id="'+node.id+'_Player"><p class="PlayerBtn"><span></span></p><p class="bar"><p class="leftBar"></p><p class="playBar"></p><p class="rightBar"></p></p><p class="playTime">00:00</p>    <a class="downLoad" id="'+node.id+'_downLoad" href="javascript:;" ></a></p>';//播放器HTML结构

    node.playType = !!(document.createElement('audio').canPlayType); //判断是否支持 audio

   

}

 

WavPlayer.prototype={

       

        play:function(){

            var node = this;

            node.box.html(node.html);

            node.loading = $('#'+node.id+'_loading');

            node.player = $('#'+node.id+'_Player');

            node.btn = node.player.find('.PlayerBtn span');

            node.playTime = node.player.find('.playTime');

            node.bar = node.player.find('.bar');

            node.playBar = node.bar.find('.playBar');

            node.leftBar = node.bar.find('.leftBar');

            node.rightBar = node.bar.find('.rightBar');

            node.type = true ;

           

            if (node.downLoad)

            {  

                $('#'+node.id+'_downLoad').click(function(){node.downLoad();});

            }

       

            if(!node.playType){ //不支持audio的则用windows  Media

 

                var MediaHtml = '<p style="visibility:hidden;"><object ';

 

                if($.browser.msie){

                    MediaHtml +=' classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" ';

                }

                else{

                    MediaHtml +=' type="application/x-ms-wmp" ';

                }

               

                MediaHtml +=' id="'+node.id+'_Media" ><param name="URL" value="'+node.url+'" /><param name="rate" value="1" /><param name="balance" value="0" /><param name="currentPosition" value="0" /><param name="playCount" value="1" /><param name="autoStart" value="0" /><param name="currentMarker" value="0" /><param name="invokeURLs" value="-1" /><param name="volume" value="50" /><param name="mute" value="0" /><param name="stretchToFit" value="0" /><param name="windowlessVideo" value="0" /><param name="enabled" value="-1" /><param name="enableContextMenu" value="-1" /><param name="fullScreen" value="0" /> <param name="enableErrorDialogs" value="-1" /></object></p>';

 

                node.MediaBox=$(MediaHtml).insertAfter(node.box);

 

               

                node.Media = document.getElementById(node.id+'_Media');

 

                node.timer = setInterval(function(){node.IEplayerSet();},200);

 

                if($.browser.opera){

                   

                    node.loading.hide();

                    node.MediaBox.css('visibility','visible');

 

                }

               

       

           

            }

            else{

               

                node.hide = $('<p style="display:none;"></p>').insertAfter(node.box);

                node.MediaPlay = $('<audio src="'+node.url+'" controls="controls"></audio>').appendTo(node.hide);

                node.Media = node.MediaPlay[0];

 

           

                node.MediaPlay.bind("canplaythrough", function(){

                   

                    if(node.type){

                        node.loading.hide();

                        node.player.show();

                        node.playerSet();

                        node.type = false;

                    }

               

                });

            

            }          

 

        },

        IEplayerSet:function(){

            var node = this;

 

            

            switch(node.Media.playState)

            {   

                case 10:

                {

                 

                  if(node.type){

                     node.loading.hide();

                     node.MediaBox.css('visibility','hidden');

                     node.btn.click(function(){

                        node.playerBtn(this);   

 

                     });

                  

                     node.player.show();

                 

                     node.barWidth = node.bar.width()-node.leftBar.width()-node.rightBar.width();

                  

               

                      node.bar.click(function(e){

                           

                        if(node.Media.playState == 3) {

                           

                            var offset = node.bar.offset(),

                                 mX = e.clientX,

                                 nowWidth = e.clientX - offset.left - node.leftBar.width();

                            nowWidth = nowWidth<0?0 : nowWidth>node.barWidth?node.barWidth :  nowWidth;

                            var nowTime = node.duration * nowWidth / node.barWidth;

                            node.playBar.width(nowWidth);

                            node.Media.controls.currentPosition = nowTime;

                       

                        }

 

                    });

 

                    node.type = false;

                  }

 

                }

                break;

                case 3:

                {  

                   node.playTime.html(node.Media.controls.currentPositionString);

                   node.NowTime = node.Media.controls.currentPosition;

                   node.duration = node.Media.currentMedia.duration;

                   node.playbar();

 

                }

                break;

                case 1:

                {  

                  node.playTime.html('00:00');

                  node.btn.attr('class','');

                  node.bar.attr('class','bar');

                  node.playBar.width('0');

                }

                break;

                default:

                {

                 

                }

            }

 

           

        },

        playerSet:function(){

            var node = this;

 

            node.duration = node.Media.duration;

            node.barWidth = node.bar.width()-node.leftBar.width()-node.rightBar.width();       

   

            node.btn.click(function(){

                node.playerBtn(this);  

 

            });

           

            node.MediaPlay.bind("ended", function(){

                node.Media.currentTime = 0;

                node.btn.attr('class','');

                node.Media.pause();

                ;

            });

 

            node.MediaPlay.bind("timeupdate", function(){

               

                node.NowTime = node.Media.currentTime;

                node.playTime.html(node.timeChange(node.NowTime));

                node.playbar();

            });

 

            node.bar.click(function(e){

           

           

                if(!node.Media.paused) {

                   

                    node.setBar(e);

                }

 

            });

       

       

        },

        playerBtn:function(tag){

            var node = this,tagNode = $(tag);

               

            if (tagNode.attr('class') == 'on'){

                tagNode.attr('class','');

                if(!node.playType){

                    node.Media.controls.pause();

                }

                else{

                    node.Media.pause();

                }

               

            }

            else{

                tagNode.attr('class','on');

                if(!node.playType){

                    node.Media.controls.play();

                }

                else{

                    node.Media.play();

                }

               

            }

       

        },

        timeChange:function(n){

           

            var num = Math.round(n),

                t1 = Math.floor(num/60),

                t2 = num%60,

                timer = t1 < 10 ? '0'+ t1 : t1;

            timer += ":";

            timer += t2 < 10 ? '0'+ t2 : t2;

       

           

            return timer;

 

        },

        playbar:function(){

            var node = this;

               

            if (node.NowTime == 0)

            {

                node.bar.attr('class','bar');

                node.playBar.width('0');

            }

            else{

                var nowWidth = node.barWidth * node.NowTime / node.duration;

                node.bar.attr('class','bar onPlay');

                node.playBar.width(nowWidth);

            }

   

        },

        setBar:function(e){

 

            var node=this,

                offset = node.bar.offset(),

                mX = e.clientX,

                nowWidth = e.clientX - offset.left - node.leftBar.width();

            nowWidth = nowWidth<0?0 : nowWidth>node.barWidth?node.barWidth :  nowWidth;

            var nowTime = node.duration * nowWidth / node.barWidth;

           

            if(!node.playType){

                node.playBar.width(nowWidth);

                node.Media.controls.currentPosition = nowTime;

            }

            else{

                node.Media.currentTime = nowTime;

            }

           

 

           

       

        }

 

};

 

function theWavPlayer(obj){

 

    if ( obj.id != undefined && obj.url != undefined )

    {

        var newWavPlayer = new WavPlayer(obj);

        newWavPlayer.play();

    }

 

   

}