十三.Android简练的旋律播放器和录像播放器

by admin on 2019年9月5日

HTML+JS的韵律播放器
Web
上的旋律直到未来,依旧一纸空文一项意在网页上播放音频的科班。前几天,大多数旋律是通过插件(比如Flash)来播音的。可是,并不是全体浏览器都负有一样的插件。HTML5
规定了一种通过 audio 成分来含有音频的正规措施。audio
元素能够播放声音文件或然音频流。

Wave

  • 当今的智能手提式有线话机更加的取代古板音乐播放器的功用了。本次我们就来探问轻易的音频播放器和录制播放器怎么着编写。

<audio src=”song.mp3″ controls=”controls”>

Overview

一个简约的节奏播放器的贯彻,可达成自定义缓存,能够播放各个音频流。

</audio>

行使格局

  1. 创办多少个旋律播放器

let player = StreamAudioPlayer()
  1. 将音频数据传递给播放器

player.response(with: data)
/// 当解析完音频头部信息,播放器会自动进行播放。
  1. 自定义属性

安装最少播放帧

player?.leastPlayPackets = 100
  1. 安装代理

player.delegate = self

    func streamAudioPlayer(_ player: StreamAudioPlayer, parsedProgress progress: Progress) {
        DispatchQueue.main.async {
            /// 这里可以显示解析进度(基本上就是网络请求的进度)。
        }
    }

    func streamAudioPlayerCompletedParsedAudioInfo(_ player: StreamAudioPlayer) {
        DispatchQueue.main.async {
            /// 音频信息头解析完成
        }
    }

    func streamAudioPlayer(_ player: StreamAudioPlayer, didCompletedPlayFromTime time: TimeInterval) {
        DispatchQueue.main.async {
            /// 这里可以取消显示indicator.
            /// 成功从某一个点开始播放.
            self.player?.play()
        }
    }

    func streamAudioPlayer(_ player: StreamAudioPlayer, didCompletedPlayAudio isEnd: Bool) {
        DispatchQueue.main.async {
            if isEnd {
                /// 下一首音频
            } else {
                /// 显示indicator,表示音频数据还没有过来.
            }
        }
    }
  1. 着力决定

player?.play()
player?.pause()
player?.stop()
/// 如果返回的true,表示已经有数据并成功seek到该点的位置,false表示时间超出范围或者就是音频数据还没有被解析,这个时候使用delegate来监听。
player?.seek(toTime: 1024)

提议不要处处利用UISlidervalueChangedseek,下边给出最棒的方案:

/// Add valueChanged target to timeSliderValueChange
timeSlider.addTarget(self, action: #selector(timeSliderValueChange(_:)), for: .valueChanged)

/// Add touchUpInside and touchUpOutside target to timeSliderSeek
timeSlider.addTarget(self, action: #selector(timeSliderSeek(_:)), for: .touchUpInside)
timeSlider.addTarget(self, action: #selector(timeSliderSeek(_:)), for: .touchUpOutside)

@objc fileprivate func timeSliderValueChange(_ sender: MusicPlayerSlider) {
}

@objc fileprivate func timeSliderSeek(_ sender: MusicPlayerSlider) {
    if player?.seek(toTime: TimeInterval(sender.value)) == true {
        player?.play()
    } else {
        /// 显示缓存提示
    }
}
  • MediaPlayer:音频的主导操作类。

试着用audio 与 windows media 编写二个多浏览器帮衬的点子播放器:
Html:

流程图

奥门威尼斯网址 1

AudioToolBox StreamAudioPlayer

GitHub:
Wave

方法 作用
start 开始
pause 暂停
reset 停止
prepare 准备就绪
isPlaying 是否正在播放
release 释放这个播放器
setDataSource 设置音频文件路径

 

Demo

最佳的德姆o正是本人的毕业设计:
Music

喜欢的相爱的人就给个star吧

  • File:文件读取类,读取必要播放的文本。
  • 猎取SD路径方法 Environment.getExternalStorageDirectory()

<!DOCTYPE HTML>

奥门威尼斯网址 2

<html>

第一要在sd根目录下放置多少个music.mp4文件。

 

  • 初始化MediaPlayer

<head>

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

File file =new File(Environment.getExternalStorageDirectory(),"music.mp3");//将文件存放为file对象 try { mediaPlayer.setDataSource(file.getPath;//设置音频文件路径 mediaPlayer.prepare();//准备 } catch (IOException e) { e.printStackTrace(); }

  <title>WavPlayer</title>

  • 开关监听

  <meta name=”Author” content=””>

  <meta name=”Keywords” content=””>

switch (view.getId { case R.id.btn_start: if(!mediaPlayer.isPlaying{ mediaPlayer.start(); } break; case R.id.btn_pause: if(mediaPlayer.isPlaying{ mediaPlayer.pause(); } break; case R.id.btn_stop: if(mediaPlayer.isPlaying{ mediaPlayer.reset(); initMediaPlayer(); } break; }

  <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>

@Override public void onDestroy(){ super.onDestroy(); if(mediaPlayer!=null){ mediaPlayer.stop(); mediaPlayer.release(); } }

</head>

预览效果如下:

<body>

奥门威尼斯网址 3

 

预览声音。Σ︴。这一个不能预览啦。

 

  • 与节奏播放器类似,只然而换来了VideoView类。
  • VideoView类

<style>

方法 作用
start 开始
pause 暂停
resume 视频重新从头播放
isPlaying 是否在播放
setVideoPath 设置播放文件的地址
suspend 销毁

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

  • File:文件读取类,读取要求播放的文件。
  • 获得SD路线方法 Environment.getExternalStorageDirectory()

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

奥门威尼斯网址 4

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

首先你的根目录下须求放叁个叫video.DVD文件。

    .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;}

   

 File file =new File(Environment.getExternalStorageDirectory(),"video.mp4");//将文件存放为file对象videovFilm.setVideoPath(file.getPath;//设置音频文件路径

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

  • 八种操作

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

 

 switch (view.getId { case R.id.btn_play: if(!videovFilm.isPlaying{ videovFilm.start(); } break; case R.id.btn_pause: if(videovFilm.isPlaying{ videovFilm.pause(); } break; case R.id.btn_resume: if(videovFilm.isPlaying{ videovFilm.resume(); } break; }

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

  • 脱离销毁

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

   

@Override public void onDestroy(){ super.onDestroy(); if(videovFilm!=null) { videovFilm.suspend(); } }

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

预览效果如下:

 

奥门威尼斯网址 5

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

  • Github源码

 

    .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>

 

<div id=”WavPlayer” style=”width:391px;height:66px;”></div>

 

 

<div id=”loadStatus” ></div>

<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”/><div class=”WavPlayer”
id=”‘+node.id+’_Player”><div
class=”PlayerBtn”><span></span></div><div
class=”bar”><div class=”leftBar”></div><div
class=”playBar”></div><div
class=”rightBar”></div></div><div
class=”playTime”>00:00</div>    <a class=”downLoad”
id=”‘+node.id+’_downLoad” href=”javascript:;”
></a></div>’;//播放器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 = ‘<div
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></div>’;

 

                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 = $(‘<div
style=”display:none;”></div>’).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();

    }

 

   

}

 

Web
上的节奏直到今后,依旧不真实一项目的在于网页上海人民广播广播台播音频的正儿八经。前日,大多数旋律是经过插件(比方Flash)来播放…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图