<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>循环播放音乐</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app",[]);
app.controller("AppController",["$scope",function($scope){
//音乐列表
var musicList = [
{addr:"music/two_tigers.mp3",geci:"两只老虎两只老虎 跑得快跑得快一只没有耳朵 一只没有尾巴真奇怪 真奇怪 "},
{addr:"music/worms_fly.mp3",geci:"黑黑的天空低垂 亮亮的繁星相随 虫儿飞虫儿飞 你在思念谁 天上的星星流泪 地上的玫瑰枯萎 冷风吹冷风吹 只要有你陪 虫儿飞花儿睡 一双又一对才美 不怕天黑只怕心碎 不管累不累 也不管东南西北"},
{addr:"music/spring.mp3",geci:"春天在哪里呀? 春天在哪里呀? 春天在那青翠的山林里 这里有红花呀,这里有绿草 还有那会唱歌的小黄鹂 嘀哩哩嘀哩嘀哩哩, 嘀哩哩嘀哩嘀哩哩 春天在青翠的山林里, 还有那会唱歌的小黄鹂"},
];
var index = 0;//当前音乐对象对应的下标
//播放状态
$scope.isPlay = false;
var audioEle = null;
//当前正在播放的音乐对象
$scope.currentMusic = musicList[index];
//播放音乐
$scope.bofang = function(){
if(audioEle == null){
//创建audio元素 audio有play和pause的方法
audioEle = document.createElement("audio");
//指定歌曲路径
audioEle.src = $scope.currentMusic.addr;
//绑定结束事件，实现自动播放
audioEle.onended = function(){
//手动更新视图(解决音乐换掉是歌词不换的问题)
$scope.$apply(function(){
//播放下一首
$scope.next();
}); };
}
//调用播放方法
audioEle.play();
//更新播放状态
$scope.isPlay = true;
};
//暂停播放
$scope.stop = function(){
audioEle.pause();//调用audio的暂停方法
$scope.isPlay = false;
};
//下一首
$scope.next = function(){
//判断下标
if(index == musicList.length-1){
//alert("别点了，后边没有了");
index = 0;
}else{
index++;
}
//停掉正在播放的音乐
$scope.stop();
//重置当前音乐
$scope.currentMusic = musicList[index];
//将之前音乐元素置为null
audioEle = null;
$scope.bofang();
};
//上一首
$scope.previous = function(){
//判断下标
if(index == 0){
index = musicList.length-1;
}else{
//下标+1
index--;
}
//停掉正在播放的音乐
$scope.stop();
//重置当前音乐
$scope.currentMusic = musicList[index];
//将之前音乐元素置为null
audioEle = null;
$scope.bofang();
};
}]);
</script>
<style type="text/css">
.myplayer{
width:300px;
background-color: brown;
}
</style>
</head>
<body ng-app="app">
<div ng-controller="AppController">
<h3>简易音乐播放器</h3>
<div class="myplayer">
<!--跑马灯用来显示歌词 -->
<marquee behivor="scroll" direction="left" ng-bind="currentMusic.geci">
</marquee>
<div class="myBtn">
<button ng-click="previous()" ><<</button>
<button ng-show="isPlay" ng-click="stop()">||</button>
<button ng-hide="isPlay" ng-click="bofang()">▷</button>
<button ng-click="next()">>></button>
</div>
</div>
</div>
</body>
</html>
AngularJS小案例_简易音乐播放器
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
AngularJS+thinkphp相关笔记（一）
1.應用：一些功能的組合就是應用。2.jQuery是一個類庫（一系列函數的集合），AngularJS是一個框架（一堆類庫的集合）。3.AngularJ
AngularJS——5、Http
$http.get(url) 讀取服務器數據。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="//apps
AngularJS - 按需加载 - require
index.html <html> <head> <style> .active { color: red; font-weight: bold; }
AngularJS分页实现
1. AngularJs 分頁按鈕原理: 這樣生成的分頁是有多少頁顯示多少個分頁按鈕: 1.首先在頁面創建按鈕區: <!-- 分頁按鈕 --> <div> <ul clas