angularjs的音乐循环播放
来源：互联网 发布：如何上淘宝一千零一夜 编辑：程序博客网 时间：2024/05/19 18:40
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{
text-decoration: none;
color: red;
}
a:hover{
color: #83C0EF;
}
td{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #F7F7F7;
font-family: "微软雅黑";
font-size: 14px;
}
</style>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/angular-route.js" ></script>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script>
angular.module("myapp",[]).controller("mycontr",function($scope){
$scope.json=[{"gname":"单身情歌","zname":"林志炫","url":"video/danshenqingge.mp3"},{"gname":"过火","zname":"王闯","url":"video/guohuo.mp3"},{"gname":"老人与海","zname":"王闯","url":"video/laorenyuhai.mp3"},{"gname":"神话","zname":"王闯","url":"video/shenhua.mp3"}];
$scope.dian=function(i){
$scope.uu=$scope.json[i].url;
}
});
var i=0;
function dianfang(){
var yarr=[{"gname":"单身情歌","zname":"林志炫","url":"video/danshenqingge.mp3"},{"gname":"过火","zname":"王闯","url":"video/guohuo.mp3"},{"gname":"老人与海","zname":"王闯","url":"video/laorenyuhai.mp3"},{"gname":"神话","zname":"王闯","url":"video/shenhua.mp3"}];
var aa=$("audio");
// alert(aa[0].paused)
if(aa[0].paused){
aa.attr("src",""+yarr[i].url+"");
setInterval(function(){
if(aa[0].ended){
i++;
i=i%yarr.length;
dianfang();
}
},10)
}else{
aa[0].pause()
}
};
</script>
</head>
<body>
<table width="600px" height="300px" border="0" cellspacing="0" ng-app="myapp" ng-controller="mycontr">
<tr bgcolor="#FAFAFA">
<td >
<input type="checkbox" ng-model="qx"/> 全选
</td>
<td colspan="2"><button onclick="dianfang()" ng-click="qdian()">播放选中的音乐</button></td>
<td>播放</td>
<td>歌词</td>
<td>下载</td>
</tr>
<tr ng-repeat="arr in json">
<td>
<input type="checkbox" ng-checked="qx"/> {{$index+1}}
</td>
<td>{{arr.gname}}</td>
<td>{{arr.zname}}</td>
<td><a href="#" ng-click="dian($index)">播放</a></td>
<td>歌词</td>
<td>下载</td>
</tr>
<tr>
<td colspan="6">
<audio ng-model="yin" controls="controls" ng-src="{{uu}}" autoplay="autoplay" style="width: 500px;"></audio>
</td>
</tr>
</table>
</body>
</html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{
text-decoration: none;
color: red;
}
a:hover{
color: #83C0EF;
}
td{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #F7F7F7;
font-family: "微软雅黑";
font-size: 14px;
}
</style>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/angular-route.js" ></script>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script>
angular.module("myapp",[]).controller("mycontr",function($scope){
$scope.json=[{"gname":"单身情歌","zname":"林志炫","url":"video/danshenqingge.mp3"},{"gname":"过火","zname":"王闯","url":"video/guohuo.mp3"},{"gname":"老人与海","zname":"王闯","url":"video/laorenyuhai.mp3"},{"gname":"神话","zname":"王闯","url":"video/shenhua.mp3"}];
$scope.dian=function(i){
$scope.uu=$scope.json[i].url;
}
});
var i=0;
function dianfang(){
var yarr=[{"gname":"单身情歌","zname":"林志炫","url":"video/danshenqingge.mp3"},{"gname":"过火","zname":"王闯","url":"video/guohuo.mp3"},{"gname":"老人与海","zname":"王闯","url":"video/laorenyuhai.mp3"},{"gname":"神话","zname":"王闯","url":"video/shenhua.mp3"}];
var aa=$("audio");
// alert(aa[0].paused)
if(aa[0].paused){
aa.attr("src",""+yarr[i].url+"");
setInterval(function(){
if(aa[0].ended){
i++;
i=i%yarr.length;
dianfang();
}
},10)
}else{
aa[0].pause()
}
};
</script>
</head>
<body>
<table width="600px" height="300px" border="0" cellspacing="0" ng-app="myapp" ng-controller="mycontr">
<tr bgcolor="#FAFAFA">
<td >
<input type="checkbox" ng-model="qx"/> 全选
</td>
<td colspan="2"><button onclick="dianfang()" ng-click="qdian()">播放选中的音乐</button></td>
<td>播放</td>
<td>歌词</td>
<td>下载</td>
</tr>
<tr ng-repeat="arr in json">
<td>
<input type="checkbox" ng-checked="qx"/> {{$index+1}}
</td>
<td>{{arr.gname}}</td>
<td>{{arr.zname}}</td>
<td><a href="#" ng-click="dian($index)">播放</a></td>
<td>歌词</td>
<td>下载</td>
</tr>
<tr>
<td colspan="6">
<audio ng-model="yin" controls="controls" ng-src="{{uu}}" autoplay="autoplay" style="width: 500px;"></audio>
</td>
</tr>
</table>
</body>
</html>
阅读全文
0 0
- angularjs的音乐循环播放
- 音乐循环播放器的PCB设计
- 循环播放音乐
- 网页背景音乐循环播放
- 使用mciSendCommand循环播放音乐
- IOS循环播放音乐实例
- iphone 后台循环播放音乐
- 使用mciSendCommand循环播放音乐
- 使用mciSendCommand循环播放音乐
- C#用mciSendString实现音乐的循环播放
- discuzx2.5音乐播放器自动播放并且循环播放，最简单的修改方法
- Delphi TMediaPlayer播放音乐出现"no MCI device open"的错误的解决方法；循环播放
- 播放音乐的脚本
- 音乐播放的问题？
- 音乐的播放
- 音乐的随机播放
- 播放简短的音乐
- 简单的音乐播放
- JAVA动态代理模式源码解析
- 深刻理解HDFS工作机制
- Mysql外键级联动作（删除和更新）
- 作业
- 定义一个图形类及其子类（三角形类和矩形类），分别计算其面积和周长
- angularjs的音乐循环播放
- 汇编(五)
- LeetCode--Decode Ways(解码方式)Python
- SqlServer从备份中还原
- 应届生经典面试题：说说进程与线程的区别与联系
- web项目优化日志打印方法
- Spring data kafka操作kafka消息的发送和订阅
- Spark学习笔记——数据读取和保存
- Struts2.5.12+hibernate4.3.11+spring4.3.9整合
