jqm开发的音乐播放器资源-CSDN文库

共50个文件

png：37个

html：7个

css：4个

需积分: 25 155 浏览量 2013-10-18 02:44:49 上传评论收藏 725KB RAR 举报

** jqMobi 开发音乐播放器详解 ** jqMobi 是一个轻量级的 JavaScript 框架，专为移动设备优化，旨在提供快速、高效且易于使用的前端开发解决方案。本项目利用 jqMobi 实现了一个音乐播放器，旨在提供流畅的音乐播放体验，同时也展示了 jqMobi 在构建移动端交互应用方面的强大功能。 ### jqMobi 基础概念 1. **事件处理**：jqMobi 提供了与 jQuery 类似的事件绑定机制，如 `$.on()` 方法，可以方便地绑定和处理用户交互事件，如点击、滑动等。 2. **DOM 操作**：jqMobi 的选择器功能强大，可以方便地获取和操作 DOM 元素。例如，`$()` 函数用于选择元素，`.html()` 和 `.attr()` 方法分别用于设置或获取元素内容和属性。 3. **动画效果**：jqMobi 提供了一些基本的动画效果，如淡入淡出、滑动等，可以轻松实现页面元素的动态展示。 4. **异步请求**：`$.ajax()` 方法支持 JSONP、GET、POST 等多种方式的异步数据请求，这对于音乐播放器获取音频资源或元数据至关重要。 ### 音乐播放器核心功能 1. **音频播放器组件**：音乐播放器的核心是音频播放组件，通常使用 HTML5 的 `<audio>` 标签。通过 JavaScript API，我们可以控制音频的播放、暂停、停止、音量调整以及进度跳转。 2. **歌曲列表**：显示歌曲列表是播放器的常见功能。jqMobi 可以方便地创建和管理这些列表项，用户可以通过点击选择不同的歌曲进行播放。 3. **播放控制**：包括播放/暂停按钮、上一首/下一首切换、进度条和音量控制。这些可以通过监听事件并更新音频元素状态来实现。 4. **播放状态反馈**：实时显示当前播放歌曲的标题、艺术家、时长以及播放进度。这需要监听音频元素的 `timeupdate` 事件，并更新相应的 UI 元素。 5. **缓存与预加载**：为了提升用户体验，可以预加载下一首歌曲，以减少换歌时的等待时间。jqMobi 可以用来实现这样的逻辑，通过监听当前歌曲的结束事件来触发预加载。 6. **播放模式**：播放器通常提供单曲循环、列表循环和随机播放等多种模式。这需要在歌曲切换时依据选定的模式进行判断和处理。 ### jqMobi 的优势 1. **性能优化**：jqMobi 为移动设备设计，对内存和 CPU 使用进行了优化，尤其适用于资源有限的移动环境。 2. **轻量级**：jqMobi 小巧精悍，不依赖其他库，减少了页面加载时间。 3. **兼容性**：支持多平台和多浏览器，包括 iOS、Android、Windows Phone 等主流移动设备。 4. **模块化**：jqMobi 采用模块化设计，可以根据需要选择性引入所需功能，避免不必要的资源浪费。 "jqm开发的音乐播放器"项目不仅展示了 jqMobi 在移动前端开发中的实用性，也体现了其在构建交互式音乐播放应用方面的潜力。开发者可以通过这个实例学习如何结合 jqMobi 的特性和 HTML5 的音频 API 来创建功能丰富的音乐播放器。

展开

资源详情

资源评论

资源推荐

收起资源包目录

ttpod.rar （50个子文件）

ttpod

tt_singer.html 3KB

jquery.mobile-1.3.2.min.js 142KB

jquery-1.9.1.min.js 90KB

mp3

top10.html 3KB

jquery.mobile-1.3.2.min.css 92KB

singleTop.html 5KB

tt_music.html 4KB

images

FPlayBtn.png 2KB

who.png 10KB

top5.png 12KB

jay.png 9KB

hhot.png 4KB

ww.png 34KB

thumb.png 7KB

voicechina.png 30KB

hot.png 21KB

icons-18-white.png 5KB

backarrow.png 1KB

top4.png 12KB

sss.png 43KB

thumb3.png 10KB

forwardBtn.png 2KB

icons-36-black.png 4KB

s.png 6KB

singer.png 44KB

FpauseBtn.png 2KB

jayB.png 38KB

top2.png 11KB

thumb2.png 9KB

cover.png 6KB

top1.png 10KB

topPoster.png 36KB

icons-36-white.png 12KB

heart.png 2KB

backBtn.png 2KB

top3.png 7KB

tticon.png 3KB

playBtn.png 5KB

zhangyu.png 18KB

cyx.png 8KB

top6.png 7KB

icons-18-black.png 2KB

dddd.png 28KB

songListBan.png 172KB

tt_songlist.html 5KB

topic.html 5KB

index.html 11KB

style

tt_songlist.css 5KB

top10.css 5KB

ttpod_index.css 6KB

      <!DOCTYPE html>
<html>
<head>
<title>歌单-e路音乐</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.2.min.css" />
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="style/ttpod_index.css"/>
<script>


$(function() { 

	$('.FPlayBtn').click(function() {
		
		
		playBtn();
	});
	
	
	
	
	$(".forwardBtn").bind("click",function(){
				$(".playing").next("li").addClass("playing");
				$(".playing").first().removeClass("playing");
				
				var nextSrc=$(".playing").find(".playLine").attr('data-src');
				$('.player_audio').attr("src",nextSrc);
				playBtn();
	});
	$(".backBtn").bind("click",function(){
				$(".playing").prev("li").addClass("playing");
				$(".playing").last().removeClass("playing");
				
				var prevSrc=$(".playing").find(".playLine").attr('data-src');
				alert($(".playing").find(".playLine").attr('data-src'));
				$('.player_audio').attr("src",prevSrc);
				playBtn();
	});
	

	$('.playLine').click(function() {
			var mp3Url=$(this).attr('data-src');
			$('.player_audio').attr("src",mp3Url);
			
			
			
 			playBtn();
			
			//alert($('.player_audio')[0].paused);
			var songTitle=$(this).closest("li").find("h2").text();
			$(".songName").text(songTitle);
			
			
	
	});	
	
	
	
		
});
	
function playBtn(){

	if ($('.player_audio')[0].paused == false) {
			$('.player_audio')[0].pause();
			
			$('.FPlayBtn').attr("src","images/FPlayBtn.png");
			
		} else {
			$('.player_audio')[0].play();
			$('.FPlayBtn').attr("src","images/FpauseBtn.png");
		}

		
		
}
	




</script>
</head>
<body>
<div data-role="page">
  <div data-role="header" class="ttpod_header" data-position="fixed" data-id="header"><a href="#" data-role="none"><img src="images/tticon.png"></a>
    <h1>e路音乐</h1>
    <a href="#" data-role="button" class="downloadBtn">下载手机e路音乐</a> 
    <!--导航-->
    <div data-role="navbar" data-iconpos="top">
      <ul>
        <li class="navLi activeLiBtn"> <a href="index.html" data-transition="slide" data-theme="" data-prefetch="true" data-icon="" class="navBtn" data-ajax="false"> 广场 </a> </li>
        <li class="navLi"> <a href="tt_songlist.html" data-transition="slide" data-prefetch="true" data-theme="" data-icon="" class="navBtn" data-ajax="false"> 歌单 </a> </li>
        <li class="navLi"> <a href="top10.html" data-transition="fade" data-theme="" data-icon="" class="navBtn" data-ajax="false"> 排行 </a> </li>
        <li class="navLi"> <a href="tt_singer.html" data-transition="fade" data-theme="" data-icon="" class="navBtn" data-ajax="false"> 歌手 </a> </li>
      </ul>
    </div>
    <!--导航--> 
  </div>
  <!-- /header -->
  
  <div data-role="content">
    <ul data-role="listview" data-split-icon="ttopd-playBtn" data-split-theme="d" class="musicGrouondList">
      <li class="playing"><a href="tt_music.html" data-ajax="false"  class="musicGrouondListFa">
        <div class="countFirst">01</div>
        <div class="singInfo">
          <h2>冷酷到底</h2>
          <p><span class="singer">羽泉</span><span class="favorCount">5597</span></p>
        </div>
        </a> <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop" class="playLine" data-src="mp3/lkdd.mp3"></a> </li>
      <li><a href="tt_music.html" data-ajax="false"  class="musicGrouondListFa">
        <div class="countSec">02</div>
        <div class="singInfo">
          <h2>海阔天空</h2>
          <p><span class="singer">信乐团</span><span class="favorCount">5597</span></p>
        </div>
        </a> <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop" class="playLine" data-src="mp3/jr.mp3"></a> </li>
      <li><a href="tt_music.html" data-ajax="false"  class="musicGrouondListFa"  >
        <div class="countSec">02</div>
        <div class="singInfo">
          <h2>海阔天空</h2>
          <p><span class="singer">信乐团</span><span class="favorCount">5597</span></p>
        </div>
        </a> <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop" class="playLine" data-src="mp3/hktk.mp3"></a> </li>
      <li><a href="tt_music.html" data-ajax="false">
        <div class="countThird">03</div>
        <div class="singInfo">
          <h2>囚鸟</h2>
          <p><span class="singer">张宇</span><span class="favorCount">2918</span></p>
        </div>
        </a> <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> </li>
      <li><a href="tt_music.html" data-ajax="false">
        <div class="countDefault">04</div>
        <div class="singInfo">
          <h2>灰色河堤</h2>
          <p><span class="singer">唐禹哲</span><span class="favorCount">2115</span></p>
        </div>
        </a> <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> </li>
      <li><a href="tt_music.html" data-ajax="false">
        <div class="countDefault">05</div>
        <div class="singInfo">
          <h2>囚鸟</h2>
          <p><span class="singer">张宇</span><span class="favorCount">2918</span></p>
        </div>
        </a> <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> </li>
      <li><a href="tt_music.html" data-ajax="false">
        <div class="countDefault">06</div>
        <div class="singInfo">
          <h2>囚鸟</h2>
          <p><span class="singer">张宇</span><span class="favorCount">2918</span></p>
        </div>
        </a> <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> </li>
      <li><a href="tt_music.html" data-ajax="false">
        <div class="countDefault">06</div>
        <div class="singInfo">
          <h2>囚鸟</h2>
          <p><span class="singer">张宇</span><span class="favorCount">2918</span></p>
        </div>
        </a> <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> </li>
      <li><a href="tt_music.html" data-ajax="false">
        <div class="countDefault">06</div>
        <div class="singInfo">
          <h2>囚鸟</h2>
          <p><span class="singer">张宇</span><span class="favorCount">2918</span></p>
        </div>
        </a> <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> </li>
      <li><a href="tt_music.html" data-ajax="false">
        <div class="countDefault">06</div>
        <div class="singInfo">
          <h2>囚鸟</h2>
          <p><span class="singer">张宇</span><span class="favorCount">2918</span></p>
        </div>
        </a> <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> </li>
      <li><a href="tt_music.html" data-ajax="false">
        <div class="countDefault">06</div>
        <div class="singInfo">
          <h2>囚鸟</h2>
          <p><span class="singer">张宇</span><span class="favorCount">2918</span></p>
        </div>
        </a> <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> </li>
      <li><a href="tt_music.html" data-ajax="false">
        <div class="countDefault">06</div>
        <div class="singInfo">
          <h2>囚鸟</h2>
          <p><span class="singer">张宇</span><span class="favorCount">2918</span></p>
        </div>
        </a> <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> </li>
      <li><a href="tt_music.html" data-ajax="false">
        <div class="countDefault">06</div>
        <div class="singInfo">