1、多个音频,顺序播放
2、页面可以设置播放间隔,比如默认为5秒,改设置为8秒
3、过程中,可以“暂停”;点击后再继续
4、过程中,可以选列表中的某个;比如正在播放第5个音频,点击播放第2个(接着顺序播放3、4、5)
请问有什么插件、控件、js库之类的吗?
或者类似的?
先行谢过~~~
<script>
//音乐资源
var myMusics = new Array(
{src:"Tara&筷子兄弟 小苹果.mp3",title:"Tara&筷子兄弟 小苹果"},
{src:"悲怆第三章.mp3",title:"悲怆第三章"},
{src:"Sound of My Dream.mp3",title:"Sound of My Dream"}
);
//数组下标
var index = 1;
//播放状态 单曲循环:0 列表循环:1 随机播放:2
var playState = 1;
//创建音乐列表
function createBox(){
var html="";
for(var i=0;i<myMusics.length;i++){
html+="<li>"+(i+1)+" <a href='javascript:clickName("+i+");'>"+myMusics[i].title+"</a></li>"
}
return html
}
//页面加载
$(document).ready(function(){
$("#"+"box").append(createBox());
playMusic(1);
//按钮"下一首"单击事件
$("#nextMusic").click(function(){
playMusic(1,1);
});
//按钮"上一首"单击事件
$("#lastMusic").click(function(){
playMusic(2);
});
////按钮"播放/暂停"单击事件
$("#playMusic").click(function(){
if($(this).val()=="播放"){
$(this).val("暂停");
document.getElementById("media").play();
}else if($(this).val()=="暂停"){
$(this).val("播放");
document.getElementById("media").pause();
}
});
//播放状态
$("#playState").change(function(){
playState = $(this).val();
});
$("li").mouseover(function(){
$(this).css("background-color","#F0F0F0");
});
$("li").mouseout(function(){
$(this).css("background-color","#FFFFFF");
$($("li")[index]).css("background-color","#F0F0F0");
});
});
//点击名字播放音乐
function clickName(i){
index=i;
playMusic(0);
}
//音乐播放
function playMusic(s,n){
$("#playMusic").val("暂停");
if(s==0){//点击名字播放音乐
}else if(s==1){//下一首
$("#playMusic").val("暂停");
if(playState==0){//单曲循环
if(n==0){
}else if(n==1){
index++;
if(index>=myMusics.length){
index=0;
}
}
}else if(playState==1){//列表循环
index++;
if(index>=myMusics.length){
index=0;
}
}else if(playState==2){//随机播放
index = Math.floor(Math.random()*myMusics.length);
}
}else if(s==2){//上一首
index--;
if(index<0){
index=myMusics.length-1;
}
}
//修改audio资源路径
$("#media").attr("src",myMusics[index].src);
//音乐播放
$("#media").play;
//显示音乐名称
$("#musicTitle").text(myMusics[index].title);
$("title").text(myMusics[index].title);
//重置li列表背景色
$("#box").children("li").css("background-color","#FFFFFF");
$("#box").children("li").css("font-weight","normal");
//修改播放音乐背景色
$($("#box").children("li")[index]).css("background-color","#F0F0F0");
$($("#box").children("li")[index]).css("font-weight","bold");
$("#sliding").offset({left:60});
}
</script>
<audio id="media" src="" autoplay="autoplay" onended="playMusic(1,0)"></audio>
<div style="float:left;margin-left:50px;width:450px;height:200px;">
<p id="musicTitle"></p>
<input id="lastMusic" type="button" value="上一首" />
<input id="playMusic" type="button" value="暂停" />
<input id="nextMusic" type="button" value="下一首" />
<ul id="box" style="border:1px solid black;padding:0px;height:300px;width:300px;overflow-y:auto;"></ul>
</div>
其实CMedia封装了获取当前时间的接口,当然也有获取整个长度的,根据两者的比例可以算出来滑动块的位置。至于时间的显示,只要转换一下,也根本不在话下。只是如何应该在哪里获取呢?主线程肯定是不行的,因
目录: 1.B/S架构和C/S架构区别 ...3.POST与GET区别 4.Cookie和Session的区别与联系 1.B/S架构和C/S架构区别 ## 1.B/S架构和C/S架构区别 ...7.软件测试分为哪几个阶段? 8.单元测试与集成测试的侧重点 9.系统测试范围
使用webmagic采集博客类的网站示例
http://faq.xunweb.org/itfaq/mfcbasic/ 怎样彻底结束一个线程?(2006-06-04) v怎么样以纯idispatch方式而不是引入类型库的方法调...
(转自:http://blog.csdn.net/fishmai/article/details/52170495) Android 高级(★★★) 一、 Android 性能优化(11.9 更新) 1、 如何对 Android 应用进行性能分析 ...2、 什么情况下会导致内存泄露 ...
一、 Android 性能优化 1、 如何对 Android 应用进行性能分析 2、 什么情况下会导致内存泄露 ...6、 Android 线程间通信有哪几种方式(重要) 7、 Devik 进程,Linux 进程,线程的区别 8、 描述一下 android 的
Android 高级(★★★) 一、 android 性能优化(11.9 更新) 1、 如何对 Android 应用进行性能分析 2、 什么情况下会导致内存泄露 ...6、 Android 线程间通信有哪几种方式(重要) 7、 Devik 进程,Linux 进
(四):面试前准备-有备而去百战百胜 4.1 步了解公司情况,准备三个问题向对方提问 ü 公司产品介绍 ü 营利模式 ü 发展方向 4.2 项目准备和可能会问到的技术点复习 ü 盒子模型 ü 异步处理 ü ...
为什么80%的码农都做不了架构师?>>> ...
在请教高手后,他们让我释放Windows 98系统文件来解决这个问题,可是我应该如何释放Windows 98系统文件?答:释放系统文件是一种比较有效的方法,很多朋友在使用系统时遇到的问题都需要使用Windows 98安装盘释放CAB...
五个等级SEOer的特征分析<br /> 顶尖的SEOer:<br /><br /> 他们几乎不写博客、不回帖、不参与互联网的争论,...另外听说有某SEOer搞英文站做外贸,公司每月营业额好几百万但只有30几个员工,前台小姐的工资都在
怕原帖以后关掉了,先拷过来保存一份吧,再次感谢原帖主程凯。原帖:http://ckasj.vicp.net/blog/index.php/archives/190Symbian 开发的一些小技巧 7 6月 2007 如何枚举出正在运行的App结合RApaLsSession和...
如何枚举出正在运行的App 结合RApaLsSession和TApaTaskList应该可以做到. RApaLsSession: GetAppIcon() GetAppInfo() TApaTaskList: FindApp() 从收件箱读取彩信图片 mmslist实现了首先以listbox列表的形式列出了收...
Symbian 开发的一些小技巧 7 6月 2007 如何枚举出正在运行的App 结合RApaLsSession和TApaTaskList应该可以做到. RApaLsSession: GetAppIcon() GetAppInfo() TApaTaskList: FindApp() 从收件箱读取彩信图片 mmslist...
● &运算符_1.htm● ·JavaScript的脆弱性_1.htm● ·JavaScript技巧环绕三维文字_1.htm● ·JavaScript时间显示三大心法_1.htm● ·Javascript特效欣赏(一)飘雪_1.htm● ·Java技巧(一)会变色的超链接_1.htm● ·...