[Html5]GhoneGap开发音乐播放器

最新推荐文章于 2024-04-20 20:30:09 发布

quzishen

最新推荐文章于 2024-04-20 20:30:09 发布

阅读量2.3k

点赞数 1

分类专栏： PhoneGap HTML5 文章标签： html5 function button null 音乐 search

本文链接：https://blog.csdn.net/quzishen/article/details/7210582

版权

HTML5 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

PhoneGap

1 篇文章 0 订阅

订阅专栏

开发一个Android版的音乐播放器，功能：读取SD卡的音乐，提供刷新音乐库、播放、暂停、停止功能，特别的，还支持通过左右摇手机实现歌曲切换。

代码并非商业代码，只是个人的一个尝试，所以很多地方设计的并不仔细，只是为了能多调用几次API。

<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-1.7.js"></script>
<style>
	#sp span{font-size:15px; color:green;}
	button{height:70px;width:120px;}
</style>
</head>
<body>
<h1>Music player</h1>
<br/>
<span id="sp"></span>
<div>
	<div id='infoDIV'></div>
	<div id='mediaNameDIV'></div>
	<span id='mediaTimeDIV'></span><span id='mediaInfoDIV'></span>
	<div style="width:100%;background:#A4C6C2;height:20px;">
		<div id="mp" style="width:0px;height:20px;background:#FFD047"></div>
	</div>
	<div style="margin-top:10px;">
		<button id='playBtn' οnclick='playAudio();' style="display:none;">play</button>
		<button id='pauseBtn' οnclick='pauseAudio();' style="display:none;">pause</button>
		<button id='stopBtn' οnclick='stopAudio();' style="display:none;">stop</button>
	</div>
</div>
</body>
</html>

<script type="text/javascript">
	
	document.addEventListener("deviceready",onDeviceReady,false);

	function onDeviceReady() {
		navigator.notification.confirm(
				'Do u wanna search music in ur phone?',
				confirmSusscess,
				'search music files',
				"yes, no"
		);
		
		document.addEventListener("menubutton", function(){
			navigator.notification.confirm(
				'what can i do for u?',
				function(button){
					if(button == '1') {
						stopAudio();
						confirmSusscess('1');
					}
				},
				'choose service',
				'refresh,nothing');
		}, false);
	}
	
	var phmedia = null;
	var mediaTimer = null;
	
	var totalTime = 0;
	var nowPlayId = -1;
	var totalPlayId = 0;
	
	var accOneEnd = true;
	var lastAccelerometer = 0;
	
	var confirmSusscess = function (button) {
		if(button == '1') {
			$('#sp').html('process...');
			$('#playBtn').attr('style','');
			$('#stopBtn').attr('style','');
			
			// file
			window.requestFileSystem(LocalFileSystem.PERSISTENT,0,
				function(fileSystem){
					fileSystem.root.createReader().readEntries(
						function(entries){
								var i=0;
								var targetMusicFolder = '';
								var musicDirectory = null;
								// look up music folder
								for (;i<entries.length;i++) {
									if('music' == entries[i].name) {
										targetMusicFolder = entries[i].fullPath;
										musicDirectory = entries[i];
									}
								}
								
								if(!targetMusicFolder) {
									$('#sp').html("*** no folder named music in your phone.");
								} else {
									$('#sp').html("*** looking up music in folder:<br/>" + targetMusicFolder);
								}
								
								if(musicDirectory && musicDirectory.isDirectory) {
									musicDirectory.createReader().readEntries(
										function(entries){
										totalPlayId=entries.length;
										$('#sp').html($('#sp').html()+"<br/>"+"*** found music list("+totalPlayId+"):<br/>");
											for (var i=0;i<totalPlayId;i++) {
												$('#sp').html($('#sp').html() + "<br/>" + 
													"<span id='m"+i+"' οnclick=\"chooseMusic("+i+",'"+ entries[i].toURI() +"','"+entries[i].name+"')\">" 
													+ entries[i].name 
													+ "</span><hr style='border:1px dotted gray'/>");
											}
										}, 
										function(error){
											alert('no music or not found in your phone.'+error.code);
										});
								}
						}, 
						
						function(error){
							alert('can not read your file system:'+error.code);
						});
				},
				
				function(evt){
					alert('get audio files failed!'+evt.target.error.code);			
				}
			);
		
			var watchId = navigator.accelerometer.watchAcceleration(
				function(ac){
					if(totalPlayId > 0) {
						if(nowPlayId < 0 || !accOneEnd) {
							return;
						}
						
						x = ac.x;
						if (x <= 1 && x >= -1) {
							lastAccelerometer = x;
							return;
						}
						
						if(lastAccelerometer >= 1 || lastAccelerometer <= -1) {
							lastAccelerometer = x;
							return;
						}
						
						lastAccelerometer = x;
						if(x > 1) {
							// pre
							var id = nowPlayId - 1;
							if (id < 0) {
								id=0;
							}
							chooseMusicById(id);
						} else if (x < -1) {
							// next
							var id = nowPlayId + 1;
							if(id >= totalPlayId) {
								id = totalPlayId - 1;
							}
							chooseMusicById(id);
						}
					}
				},
				function(){
					alert('accelerometer error.');
				},
				{frequency:600}
			);
		}
	}
	
	function chooseMusicById (id) {
		accOneEnd = false;
		chooseMusic(id, $('#m'+id).text(), $('#m'+id).text());
		accOneEnd = true;
	}
	
	function chooseMusic(id, src, name) {
		// media
		$('span').each(function(index){
			if(index == id) {
				$('#m'+id).attr('style','color:blue;font-weight:bold;');
				nowPlayId = id;
			} else {
				$('#m'+index).attr('style','');
			}
		});
		
		$('#mediaNameDIV').html('choose:'+name).attr('style','color:red;padding-top:10px;');
		
		stopAudio();
		loadAudio('music/'+name);//'/android_asset/www/p1rj1s_-_rockGuitar.mp3'
	}
	
	var musicStatus = 0;// 0:ready;1:run;2:pause;3:stop
	function loadAudio(src) {
		if(!src) {
			alert('play choose a audio.');
			return;
		}
		
		if(null == phmedia) {
			phmedia = new Media(src, 
				function(){
					if(musicStatus == 1) {
						afterPlay()();
					}
				}, 
				function(error) {
					phmedia = null;
					navigator.notification.alert(
						'So sorry, something wrong!code:'+error.code,
						alertSuccess,
						'failed',
						'I don\'t mind.'
					);
				},
				function(s){
					status = s;
				}
			);
		}
	}
	
	var stopAudio = function() {
		if(phmedia) {
			phmedia.stop();
			phmedia.release();
			phmedia = null;
			afterPlay();
		}
	}
	
	var afterPlay = function() {
		musicStatus = 3;
		
		if(null != mediaTimer) {
			clearInterval(mediaTimer);
		}
			
		$('#pauseBtn').attr('style','display:none;');
		$('#playBtn').attr('style','');
		
		$('#mediaInfoDIV').html('');
		$('#mediaTimeDIV').html('');
		
		$('#mp').css('width','0px');
	}
	
	var pauseAudio = function () {
		if(phmedia) {
			phmedia.pause();
			musicStatus = 2;
			if(null != mediaTimer) {
				clearInterval(mediaTimer);
			}
			
			$('#pauseBtn').attr('style','display:none;');
			$('#playBtn').attr('style','');
		}
	}
	
	var playAudio = function() {
		if(phmedia) {
			
			var dtt = 0;
			totalDurationTimerId = setInterval(function(){
				dtt = dtt + 200;
				if(dtt > 2000) {clearInterval(totalDurationTimerId);}
				
				var durSec = phmedia.getDuration();
				if(durSec > 0) {
					clearInterval(totalDurationTimerId);
					$('#mediaInfoDIV').html("/"+Math.round(durSec)+" sec.");
					totalTime = durSec;
				}
			}, 200);
			
			phmedia.play();
			musicStatus = 1;
			
			$('#pauseBtn').attr('style','');
			$('#playBtn').attr('style','display:none;');
			
			mediaTimer = setInterval(setPosition, 1000);
		} else {
			alert('choose a music please!');
		}
	}
	
	function setPosition() {
		if(null == phmedia) return;
		phmedia.getCurrentPosition(
			function(position){
				if(0 > position) {
					clearInterval(mediaTimer);
					mediaTimer = null;
				}
				
				$('#mediaTimeDIV').html(Math.round(position));
				
				var piTimeCount=0;
				var pi = setInterval(function(){
					piTimeCount = piTimeCount + 200;
					if (piTimeCount > 2000) {
						clearInterval(pi);
					}
					if(totalTime > 0) {
						clearInterval(pi);
						var w = position / totalTime * 100;
						var width = w + '%';
						
						$('#mp').css('width',width);
					}
				}, 200);
			},
			function(e){
				$('#mediaTimeDIV').html("Error:"+e);
			}
		);
	}
	
	function alertSuccess() {
	}
</script>

<div style="display:none;"> 
http://www.w3.org/TR/2010/WD-html5-20100304/video.html#media-resource
</div>

quzishen

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[Html5]GhoneGap开发音乐播放器

开发一个Android版的音乐播放器，功能：读取SD卡的音乐，提供刷新音乐库、播放、暂停、停止功能，特别的，还支持通过左右摇手机实现歌曲切换。代码并非商业代码，只是个人的一个尝试，所以很多地方设计的并不仔细，只是为了能多调用几次API。PhoneGap #sp span{font-size:15px; color:green;} button{height:70px;wid
复制链接

扫一扫