使用AVAudioPlayer实现本地音乐播放器,HTML5网页音

2020-03-24 11:10 来源:未知

这只是一个非常简单的音乐播放器的小demo,实现一些小功能. 大神自动略过.

功能概览:

  1. 播放/暂停/停止

  2. 上一曲/下一曲/点击列表中的歌曲名称播放对应歌曲

  3. 显示播放列表/显示正在播放的歌曲名称

  4. 循环播放/随机播放

  5. 音量/进度条/可拖动进度条控制播放进度/进度时间显示

  6. 白天模式/夜间模式

1功能介绍

 

HTML5中推出了音视频标签,可以让我们不借助其他插件就可以直接播放音视频。下面我们就利用H5的audio标签及其相关属性和方法来制作一个简单的音乐播放器。主要包括以下几个功能:

1、播放暂停、上一首和下一首

2、调整音量和播放进度条

3、根据列表切换当前歌曲

先来看一下最终的完成效果:

美高梅网投平台 1

这个音乐播放器的结构主要分为三部分:歌曲信息、播放器和播放列表,我们重点介绍一下播放器部分。首先在播放器中放三个audio标签用于播放:

 

<audio id="music1">浏览器不支持audio标签
<source  src="media/Beyond - 光辉岁月.mp3"></source>
</audio>
<audio id="music2">浏览器不支持audio标签
<source  src="media/Daniel Powter - Free Loop.mp3"></source>
</audio>
<audio id="music3">浏览器不支持audio标签
<source  src="media/周杰伦、费玉清 - 千里之外.mp3"></source>
</audio>

 

下面的播放列表也对应三个audio标签:

 

<div id="playList">
    <ul>
        <li id="m0">Beyond-光辉岁月</li>
        <li id="m1">Daniel Powter-Free Loop</li>
        <li id="m2">周杰伦、费玉清-千里之外</li>
    </ul>
</div>

 

接下来我们就开始逐步实现上面提到的功能吧,先来完成播放和暂停功能,在按下播放按钮时我们要做到进度条随歌曲进度前进,播放时间也逐渐增加,同时播放按钮变成暂停按钮,播放列表的样式也对应改变。

在做功能之前我们要先把三个audio标签获取id后存到一个数组中,供后续使用。

var music1= document.getElementById("music1");
var music2= document.getElementById("music2");
var music3= document.getElementById("music3");
var mList = [music1,music2,music3];

 

前 言

1.播放/暂停/停止

界面效果:

美高梅网投平台 21648263-f2f1b1e43c1c4c88.png美高梅网投平台 31733477-c9c062ae16a26ffb.png美高梅网投平台 41733477-55526c22e1ad530a.png

2播放和暂停:

 

我们现在就可以完成播放按钮的功能啦,首先设置一个标志,用来标记音乐的播放状态,再为数组的索引index设置一个默认值:

 然后对播放状态进行判断,调用对应的函数,并修改flag的值和列表对应项目样式:

function playMusic(){
if(flag&&mList[index].paused){
            mList[index].play();
        document.getElementById("m" index).style.backgroundColor = "#A71307";
document.getElementById("m" index).style.color = "white";
progressBar();
        playTimes();
        play.style.backgroundImage = "url(media/pause.png)";
        flag = false;
}else{
        mList[index].pause();
        flag = true;
        play.style.backgroundImage = "url(media/play.png)";
}
}

 

 上面的代码中调用了多个函数,其中播放和暂停是audio标签自带的方法,而其他的函数则是我们自己定义的。下面我们就来看一下这些函数是怎么实现的,又对应了哪些功能吧。

 

最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~

2.上一曲/下一曲/点击列表中的歌曲名称播放对应歌曲

功能介绍:

  1. 播放/暂停/停止:当点击播放按钮,按钮变为选中状态,文字为"暂停播放",再次点击会暂停. 当点击下一曲/上一曲或者选择歌曲列表中的歌名的时候,会自动播放,播放按钮状态变为选中状态.当点击停止按钮,歌曲进度变为00:00.

  2. 上一曲/下一曲/点击列表中的歌曲名称播放对应歌曲:点击上一曲/下一曲会播放列表中对应的上一曲/下一曲,歌名会对应显示,点击列表中的歌曲名称播放对应歌曲.

  3. 显示播放列表/显示正在播放的歌曲名称

  4. 循环播放/随机播放:当选择循环播放,歌曲播放完毕会自动播放列表中对应的下一曲,点击上一曲/下一曲会播放列表中对应的上一曲/下一曲;当选择随机播放,歌曲播放完毕之后或者点击上一曲/下一曲会随机播放列表中的一首歌曲.

  5. 音量/进度条/可拖动进度条控制播放进度/进度时间显示

  6. 白天模式/夜间模式

3进度条和播放时间:

 首先是进度条功能,获取歌曲的全部时长,然后再根据当前播放的进度与进度条总长度相乘计算出进度条的位置。

function progressBar(){
var lenth=mList[index].duration;
timer1=setInterval(function(){
        cur=mList[index].currentTime;//获取当前的播放时间
        progress.style.width="" parseFloat(cur/lenth)*300 "px";
        progressBtn.style.left= 60 parseFloat(cur/lenth)*300 "px";
},10)
}

下面是改变播放时间功能,这里我们设置一个定时函数,每隔一段时间来执行一次以改变播放时间。因为我们获取到的歌曲时长是以秒来计算,所以我们要利用if语句对时长判断来进行换算,将播放时间改为以几分几秒的形式来显示。

 

function playTimes(){
timer2=setInterval(function(){
        cur=parseInt(mList[index].currentTime);//秒数
        var minute=parseInt(cur/60);
        if (minute<10) {
            if(cur`<10){
                playTime.innerHTML="0" minute ":0" cur` "";
            }else{
                playTime.innerHTML="0" minute ":" cur` "";
            }
        } else{
            if(cur`<10){
                playTime.innerText= minute ":0" cur` "";
            }else{
                playTime.innerText= minute ":" cur` "";
            } 
        } 
},1000);
}

 

1、支持循环、随机播放

3.显示播放列表/显示正在播放的歌曲名称

源代码

storyboard - 随便拖的,没做自动布局 模拟器6s

美高梅网投平台 5

#import "ViewController.h"#import <AVFoundation/AVFoundation.h>@interface ViewController ()<AVAudioPlayerDelegate,UITableViewDelegate,UITableViewDataSource,AVAudioPlayerDelegate>//播放器@property (nonatomic, strong) AVAudioPlayer *player;//表示进度的slider@property (weak, nonatomic) IBOutlet UISlider *progressSlider;//计时器@property (nonatomic, strong) NSTimer *timer;//显示时间进度的label@property (weak, nonatomic) IBOutlet UILabel *progressLabel;//音乐名称@property (weak, nonatomic) IBOutlet UILabel *musicNameLabel;//存储音乐url的数组@property (nonatomic, strong) NSArray *musicArray;//音乐的下标@property (nonatomic, assign) NSInteger index;//音乐列表的tableView@property (nonatomic, strong) UITableView *tableView;//开始按钮@property (weak, nonatomic) IBOutlet UIButton *startButton;//循环模式的segControl@property (weak, nonatomic) IBOutlet UISegmentedControl *repeatModelSegControl;//夜间模式的segControl@property (weak, nonatomic) IBOutlet UISegmentedControl *tintModelControl;@end@implementation ViewController//懒加载音乐url数组- (NSArray *)musicArray { if (_musicArray == nil) {// _musicArray = [NSArray array]; NSURL *url0 = [[NSBundle mainBundle] URLForResource:@"好妹妹乐队-你曾是少年.mp3" withExtension:nil]; NSURL *url1 = [[NSBundle mainBundle] URLForResource:@"陈小春 - 扑火.mp3" withExtension:nil]; NSURL *url2 = [[NSBundle mainBundle] URLForResource:@"赵雷-画.mp3" withExtension:nil]; NSURL *url3 = [[NSBundle mainBundle] URLForResource:@"赵雷-家乡.mp3" withExtension:nil]; NSURL *url4 = [[NSBundle mainBundle] URLForResource:@"林峯 - 爱在记忆中找你.mp3" withExtension:nil]; NSURL *url5 = [[NSBundle mainBundle] URLForResource:@"宁夏 - 午餐.mp3" withExtension:nil]; NSURL *url6 = [[NSBundle mainBundle] URLForResource:@"张敬轩-愿望树上.mp3" withExtension:nil]; _musicArray = @[url0,url1,url2,url3,url4,url5,url6]; } return _musicArray;}- viewDidLoad { [super viewDidLoad]; self.index = 0; //创建音乐列表的tableView UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectMake(20, 350, 340, 250) style:UITableViewStylePlain]; self.tableView = tableView; //设置代理和数据源 self.tableView.delegate = self; self.tableView.dataSource = self; //添加 [self.view addSubview:tableView]; [self loadMusic]; //设置子控件们的tintColor NSArray *array = [self.view subviews]; [array enumerateObjectsUsingBlock:^(id _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) { [obj setTintColor:[UIColor grayColor]]; }];}- loadMusic { //创建一个错误对象,用来接收错误信息 NSError *error; //创建播放器对象 传入本地url self.player = [[AVAudioPlayer alloc] initWithContentsOfURL:self.musicArray[self.index] error:&error]; //设置代理 self.player.delegate = self; //打印错误信息 if  { NSLog(@"%@",error); } //创建一个计时器,用于记录播放进度--在计时器方法里把currentTime赋值给slider的value self.timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(sliderDisplay) userInfo:nil repeats:YES]; //设置slider的最大值 self.progressSlider.maximumValue = self.player.duration; //音乐名称 NSURL *url = self.self.musicArray[self.index]; self.musicNameLabel.text = url.lastPathComponent;}//控制音量的slider- volumeSlider:(UISlider *)sender { self.player.volume = sender.value;}//开始播放按钮- startClick:(UIButton *)sender { if (!sender.selected) { //如果player是空的 就读取音乐 否则就是已经在播放 再次点击的时候不能重新读取音乐 if (self.player == nil) { [self loadMusic]; } //准备播放, 可不写 为了规范要写. [self.player prepareToPlay]; //播放 [self.player play]; sender.selected = YES; } else { [self.player pause]; sender.selected = NO; }}//暂停 暂停按钮已删除 合并到播放按钮//- pauseClick:sender {// [self.player pause];//}//停止- stopClick:sender { [self.player pause]; self.player.currentTime = 0; self.startButton.selected = NO;}/** 计时器调用的显示slider的方法 */- sliderDisplay { //赋值 self.progressSlider.value = self.player.currentTime; //转换时间格式 NSString *curren = [self timeFormatted:self.player.currentTime]; NSString *all = [self timeFormatted:self.player.duration]; //把时间拼接赋值给显示时间的label self.progressLabel.text = [NSString stringWithFormat:@"%@/%@",curren,all];}/** 拖动进度条 */- slideProgress:(UISlider *)sender { //将当前的播放时间设置为slider的value self.player.currentTime = sender.value;}/** 将秒数转换为分秒格式的时间字符串 */- (NSString *)timeFormatted:totalSeconds{ //将秒数转换为时间 NSDate *date = [NSDate dateWithTimeIntervalSince1970:totalSeconds]; NSTimeZone *zone = [NSTimeZone systemTimeZone]; NSInteger interval = [zone secondsFromGMTForDate: date]; NSDate *localeDate = [date dateByAddingTimeInterval: interval]; //设置时间格式 NSDateFormatter *dateformmatter = [[NSDateFormatter alloc] init]; dateformmatter.dateFormat = @"mm:ss"; NSString *time = [dateformmatter stringFromDate:localeDate]; return time;}//上一曲- lastMusicClick:sender { self.startButton.selected = YES; if (self.repeatModelSegControl.selectedSegmentIndex == 0) { //顺序播放 if (self.index <= 0) { self.index = self.musicArray.count - 1; } else { self.index--; } } else { //随机播放 NSInteger index = arc4random() % self.musicArray.count; self.index = index; } [self loadMusic]; [self.player play];}//下一曲- nextMusicClick:sender { self.startButton.selected = YES; if (self.repeatModelSegControl.selectedSegmentIndex == 0) { //顺序播放 if (self.index >= self.musicArray.count - 1) { self.index = 0; } else { self.index  ; } } else { //随机播放 NSInteger index = arc4random() % self.musicArray.count; self.index = index; } [self loadMusic]; [self.player play];}#pragma mark - 播放结束调用的方法- audioPlayerDidFinishPlaying:(AVAudioPlayer *)player successfully:flag { if (self.repeatModelSegControl.selectedSegmentIndex == 0) { //顺序播放 [self nextMusicClick:nil]; } else { //随机播放 NSInteger index = arc4random() % self.musicArray.count; self.index = index; [self loadMusic]; [self.player play]; } // 音频播放完成时,调用该方法。 // 参数flag:如果音频播放无法解码时,该参数为NO。 //当音频被终端时,该方法不被调用。而会调用audioPlayerBeginInterruption方法 // 和audioPlayerEndInterruption方法}//数据源- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return self.musicArray.count;}- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewCell *cell = [[UITableViewCell alloc] init]; NSURL *url = self.musicArray[indexPath.row]; cell.textLabel.text = url.lastPathComponent; cell.textColor = [UIColor grayColor]; if (self.tintModelControl.selectedSegmentIndex == 0) { //白天模式的颜色 cell.contentView.backgroundColor = [UIColor whiteColor]; } else { //夜间模式的颜色 cell.contentView.backgroundColor = [UIColor darkGrayColor]; } return cell;}//选中cell- tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { self.startButton.selected = YES; self.index = indexPath.row; //读取音乐 播放音乐 [self loadMusic]; [self.player play];}//夜间模式选择按钮- tintModelClick:(UISegmentedControl *)sender { if (sender.selectedSegmentIndex == 0) { //白天模式 self.view.backgroundColor = [UIColor whiteColor]; //在cell方法里设置了cell的相关颜色,所以需要重新加载数据 [self.tableView reloadData]; } else { //夜间模式 self.view.backgroundColor = [UIColor darkGrayColor]; [self.tableView reloadData]; }}@end

4调整播放进度和音量:

 

接下来我们再来完成一下通过进度条调整播放进度和调整音量功能。

调整播放进度功能利用了event对象来实现,因为offsetX属性只有IE事件具有,所以推荐使用IE浏览器查看效果。先对进度条添加事件监听,当在进度条上点击鼠标时,获取鼠标的位置,并根据位置除以进度条的总长度来计算当前的播放进度,然后对歌曲进行设置。

//调整播放进度
total.addEventListener("click",function(event){
var e = event || window.event;
document.onmousedown = function(event){
        var e = event || window.event;
        var mousePos1 = e.offsetX;
        var maxValue1 = total.scrollWidth;
        mList[index].currentTime = (mousePos1/300)*mList[index].duration;
        progress.style.width = mousePos1 "px";
        progressBtn.style.left = 60  mousePos1  "px";
}
})

 

 

下面是调整音量功能,音量的调整我们采用拖动的形式实现,思路也是对音量条的按钮球添加事件监听,然后根据拖动的位置来计算按钮球相对于音量条整体的位置,最后根据计算结果与音量相乘得出当前音量:

volBtn.addEventListener("mousedown",function(event){
var e = event || window.event;
var that =this;
//阻止球的默认拖拽事件
e.preventDefault();
document.onmousemove = function(event){
var e = event || window.event;
var mousePos2 = e.offsetY;
var maxValue2 = vol.scrollHeight;
if(mousePos2<0){
            mousePos2 = 0;
}
if(mousePos2>maxValue2){
            mousePos2=maxValue2;
}
mList[index].volume = (1-mousePos2/maxValue2);
console.log(mList[index].volume);
volBtn.style.top = (mousePos2) "px";
volBar.style.height = 60-(mousePos2) "px";
document.onmouseup = function(event){
            document.onmousemove = null;
            document.onmouseup = null;
}
}
})

 

2、在播放的同时支持图片的旋转

4.循环播放/随机播放

5歌曲切换

 

最后我们再来实现比较复杂的歌曲切换功能。

先来看用上一首和下一首按钮进行切换,在切换音乐时我们要注意的问题有下面几个:第一,我们要停止当前播放的音乐,转而播放下一首音乐;第二,要清空进度条和播放时间,重新计算;第三,歌曲信息要随之改变,播放器下面的播放列表样式也要变化。在弄清楚上面三点以后我们就可以开始实现功能了。

 

//上一曲
function prevM(){
clearInterval(timer1);
clearInterval(timer2);
stopM();
qingkong();
cleanProgress();
--index;
if(index==-1){
        index=mList.length-1;
}
clearListBgc();
document.getElementById("m" index).style.backgroundColor = "#A71307";
document.getElementById("m" index).style.color = "white";
changeInfo(index);
mList[index].play();
progressBar();
playTimes();
if (mList[index].paused) {
    play.style.backgroundImage = "url(media/play.png)";
}else{
    play.style.backgroundImage = "url(media/pause.png)";
}
} 
//下一曲
function nextM(){
clearInterval(timer1);
clearInterval(timer2);
stopM();
qingkong();
cleanProgress();
  index;
if(index==mList.length){
    index=0;
}
clearListBgc();
document.getElementById("m" index).style.backgroundColor = "#A71307";
document.getElementById("m" index).style.color = "white";
changeInfo(index);
mList[index].play();
progressBar();
playTimes();
if (mList[index].paused) {
    play.style.backgroundImage = "url(media/play.png)";
}else{
    play.style.backgroundImage = "url(media/pause.png)";
}
}

下面的代码是点击列表切换歌曲。

 

m0.onclick = function (){
clearInterval(timer1);
clearInterval(timer2);
qingkong();
flag = false;
stopM();
index = 0;
pauseall();
play.style.backgroundImage = "url(media/pause.png)";
clearListBgc();
document.getElementById("m0").style.backgroundColor = "#A71307";
document.getElementById("m" index).style.color = "white";
mList[index].play();
cleanProgress();
progressBar();
changeInfo(index);
playTimes();
}
m1.onclick = function (){
clearInterval(timer1);
clearInterval(timer2);
flag = false;
qingkong();
stopM();
index = 1;
pauseall();
clearListBgc();
play.style.backgroundImage = "url(media/pause.png)";
document.getElementById("m1").style.backgroundColor = "#A71307";
document.getElementById("m" index).style.color = "white";
mList[index].play();
cleanProgress();
changeInfo(index);
progressBar();
playTimes();
}
m2.onclick = function (){
clearInterval(timer1);
clearInterval(timer2);
flag = false;
qingkong();
stopM();
index = 2;
pauseall();
play.style.backgroundImage = "url(media/pause.png)";
clearListBgc();
document.getElementById("m2").style.backgroundColor = "#A71307";
document.getElementById("m" index).style.color = "white";
mList[index].play();
cleanProgress();
changeInfo(index);
progressBar();
playTimes();
}

通过播放列表来切换歌曲与通过按钮切换的思路差不多,只是根据对应的列表项来设置当前应该播放哪首歌曲。

上面切换歌曲的函数中都调用了几个方法,下面我们来看看这些方法的用途都是什么吧。

首先是切换歌曲信息:  

function changeInfo(index){
if (index==0) {
    musicName.innerHTML = "光辉岁月";
    singer.innerHTML = "Beyond";
}
if (index==1) {
    musicName.innerHTML = "Free Loop";
    singer.innerHTML = "Daniel Powter";
}
if (index==2) {
    musicName.innerHTML = "千里之外";
    singer.innerHTML = "周杰伦、费玉清";
}
} 

 然后清空两个定时器:

//将进度条置0
function cleanProgress(timer1){
if(timer1!=undefined){
    clearInterval(timer1);
}
progress.style.width="0";
progressBtn.style.left="60px";
} 
function qingkong(timer2){ 
if(timer2!=undefined){
    clearInterval(timer2);
}
}

 

 再把播放的音乐停止,并且将播放时间恢复。

function stopM(){
if(mList[index].played){
    mList[index].pause();
    mList[index].currentTime=0;
    flag=false;
}
}

最后的最后,改变下面播放列表的样式:

function clearListBgc(){
document.getElementById("m0").style.backgroundColor = "#E5E5E5";
document.getElementById("m1").style.backgroundColor = "#E5E5E5";
document.getElementById("m2").style.backgroundColor = "#E5E5E5";
document.getElementById("m0").style.color = "black";
document.getElementById("m1").style.color = "black";
document.getElementById("m2").style.color = "black";
}

到此,音乐播放器我们就基本完成了,来看一下动图的效果:

美高梅网投平台 6

 

 

作者:杰瑞教育
美高梅网投平台,出处:http://www.cnblogs.com/jerehedu/ 
版权声明:本文版权归烟台杰瑞教育科技有限公司和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
技术咨询:美高梅网投平台 7

 

3、支持点击进度条调整播放的位置,以及调整音量

5.音量/进度条/可拖动进度条控制播放进度/进度时间显示

4、显示音乐的播放时间

6.白天模式/夜间模式

5、支持切歌:上一首、下一首、点击歌名切歌;暂停播放等~

美高梅网投平台 8界面.png美高梅网投平台 9夜间.png美高梅网投平台 10播放中.png

添加音乐有两种方式:

当点击播放按钮,按钮变为选中状态,文字为"暂停播放",再次点击会暂停. 当点击下一曲/上一曲或者选择歌曲列表中的歌名的时候,会自动播放,播放按钮状态变为选中状态.当点击停止按钮,歌曲进度变为00:00.

①可以用一个audo标签,这样应该把音乐的地址存放到一个数组中;

点击上一曲/下一曲会播放列表中对应的上一曲/下一曲,歌名会对应显示,点击列表中的歌曲名称播放对应歌曲.

②第二种方式是,有几首歌就添加几个audo标签,然后获取所有的背景音乐(示例中我们先添加三首音乐,放到一个数组中,当然,大家可以挑选自己喜欢的任何歌曲)。

当选择循环播放,歌曲播放完毕会自动播放列表中对应的下一曲,点击上一曲/下一曲会播放列表中对应的上一曲/下一曲;当选择随机播放,歌曲播放完毕之后或者点击上一曲/下一曲会随机播放列表中的一首歌曲.

play1=document.getElementById;play2=document.getElementById;play3=document.getElementById;play=[play1,play2,play3];

storyboard - 随便拖的,没做自动布局 模拟器6s

1点击播放、暂停

美高梅网投平台 11storyboard.png

首选我们应该清楚的是,在点击按钮播放的时候应该实现的有:

#import "ViewController.h"#import <AVFoundation/AVFoundation.h>@interface ViewController ()<AVAudioPlayerDelegate,UITableViewDelegate,UITableViewDataSource,AVAudioPlayerDelegate>//播放器@property (nonatomic, strong) AVAudioPlayer *player;//表示进度的slider@property (weak, nonatomic) IBOutlet UISlider *progressSlider;//计时器@property (nonatomic, strong) NSTimer *timer;//显示时间进度的label@property (weak, nonatomic) IBOutlet UILabel *progressLabel;//音乐名称@property (weak, nonatomic) IBOutlet UILabel *musicNameLabel;//存储音乐url的数组@property (nonatomic, strong) NSArray *musicArray;//音乐的下标@property (nonatomic, assign) NSInteger index;//音乐列表的tableView@property (nonatomic, strong) UITableView *tableView;//开始按钮@property (weak, nonatomic) IBOutlet UIButton *startButton;//循环模式的segControl@property (weak, nonatomic) IBOutlet UISegmentedControl *repeatModelSegControl;//夜间模式的segControl@property (weak, nonatomic) IBOutlet UISegmentedControl *tintModelControl;@end@implementation ViewController//懒加载音乐url数组- (NSArray *)musicArray { if (_musicArray == nil) {// _musicArray = [NSArray array]; NSURL *url0 = [[NSBundle mainBundle] URLForResource:@"好妹妹乐队-你曾是少年.mp3" withExtension:nil]; NSURL *url1 = [[NSBundle mainBundle] URLForResource:@"陈小春 - 扑火.mp3" withExtension:nil]; NSURL *url2 = [[NSBundle mainBundle] URLForResource:@"赵雷-画.mp3" withExtension:nil]; NSURL *url3 = [[NSBundle mainBundle] URLForResource:@"赵雷-家乡.mp3" withExtension:nil]; NSURL *url4 = [[NSBundle mainBundle] URLForResource:@"林峯 - 爱在记忆中找你.mp3" withExtension:nil]; NSURL *url5 = [[NSBundle mainBundle] URLForResource:@"宁夏 - 午餐.mp3" withExtension:nil]; NSURL *url6 = [[NSBundle mainBundle] URLForResource:@"张敬轩-愿望树上.mp3" withExtension:nil]; _musicArray = @[url0,url1,url2,url3,url4,url5,url6]; } return _musicArray;}- viewDidLoad { [super viewDidLoad]; self.index = 0; //创建音乐列表的tableView UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectMake(20, 350, 340, 250) style:UITableViewStylePlain]; self.tableView = tableView; //设置代理和数据源 self.tableView.delegate = self; self.tableView.dataSource = self; //添加 [self.view addSubview:tableView]; [self loadMusic]; //设置子控件们的tintColor NSArray *array = [self.view subviews]; [array enumerateObjectsUsingBlock:^(id _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) { [obj setTintColor:[UIColor grayColor]]; }]; }- loadMusic { //创建一个错误对象,用来接收错误信息 NSError *error; //创建播放器对象 传入本地url self.player = [[AVAudioPlayer alloc] initWithContentsOfURL:self.musicArray[self.index] error:&error]; //设置代理 self.player.delegate = self; //打印错误信息 if  { NSLog(@"%@",error); } //创建一个计时器,用于记录播放进度--在计时器方法里把currentTime赋值给slider的value self.timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(sliderDisplay) userInfo:nil repeats:YES]; //设置slider的最大值 self.progressSlider.maximumValue = self.player.duration; //音乐名称 NSURL *url = self.self.musicArray[self.index]; self.musicNameLabel.text = url.lastPathComponent; }//控制音量的slider- volumeSlider:(UISlider *)sender { self.player.volume = sender.value;}//开始播放按钮- startClick:(UIButton *)sender { if (!sender.selected) { //如果player是空的 就读取音乐 否则就是已经在播放 再次点击的时候不能重新读取音乐 if (self.player == nil) { [self loadMusic]; } //准备播放, 可不写 为了规范要写. [self.player prepareToPlay]; //播放 [self.player play]; sender.selected = YES; } else { [self.player pause]; sender.selected = NO; } }//暂停 暂停按钮已删除 合并到播放按钮//- pauseClick:sender {// [self.player pause];//}//停止- stopClick:sender { [self.player pause]; self.player.currentTime = 0; self.startButton.selected = NO;}/** 计时器调用的显示slider的方法 */- sliderDisplay { //赋值 self.progressSlider.value = self.player.currentTime; //转换时间格式 NSString *curren = [self timeFormatted:self.player.currentTime]; NSString *all = [self timeFormatted:self.player.duration]; //把时间拼接赋值给显示时间的label self.progressLabel.text = [NSString stringWithFormat:@"%@/%@",curren,all];}/** 拖动进度条 */- slideProgress:(UISlider *)sender { //将当前的播放时间设置为slider的value self.player.currentTime = sender.value;}/** 将秒数转换为分秒格式的时间字符串 */- (NSString *)timeFormatted:totalSeconds{ //将秒数转换为时间 NSDate *date = [NSDate dateWithTimeIntervalSince1970:totalSeconds]; NSTimeZone *zone = [NSTimeZone systemTimeZone]; NSInteger interval = [zone secondsFromGMTForDate: date]; NSDate *localeDate = [date dateByAddingTimeInterval: interval]; //设置时间格式 NSDateFormatter *dateformmatter = [[NSDateFormatter alloc] init]; dateformmatter.dateFormat = @"mm:ss"; NSString *time = [dateformmatter stringFromDate:localeDate]; return time;}//上一曲- lastMusicClick:sender { self.startButton.selected = YES; if (self.repeatModelSegControl.selectedSegmentIndex == 0) { //顺序播放 if (self.index <= 0) { self.index = self.musicArray.count - 1; } else { self.index--; } } else { //随机播放 NSInteger index = arc4random() % self.musicArray.count; self.index = index; } [self loadMusic]; [self.player play];}//下一曲- nextMusicClick:sender { self.startButton.selected = YES; if (self.repeatModelSegControl.selectedSegmentIndex == 0) { //顺序播放 if (self.index >= self.musicArray.count - 1) { self.index = 0; } else { self.index  ; } } else { //随机播放 NSInteger index = arc4random() % self.musicArray.count; self.index = index; } [self loadMusic]; [self.player play];}#pragma mark - 播放结束调用的方法- audioPlayerDidFinishPlaying:(AVAudioPlayer *)player successfully:flag { if (self.repeatModelSegControl.selectedSegmentIndex == 0) { //顺序播放 [self nextMusicClick:nil]; } else { //随机播放 NSInteger index = arc4random() % self.musicArray.count; self.index = index; [self loadMusic]; [self.player play]; } // 音频播放完成时,调用该方法。 // 参数flag:如果音频播放无法解码时,该参数为NO。 //当音频被终端时,该方法不被调用。而会调用audioPlayerBeginInterruption方法 // 和audioPlayerEndInterruption方法 }//数据源- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return self.musicArray.count;}- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewCell *cell = [[UITableViewCell alloc] init]; NSURL *url = self.musicArray[indexPath.row]; cell.textLabel.text = url.lastPathComponent; cell.textColor = [UIColor grayColor]; if (self.tintModelControl.selectedSegmentIndex == 0) { //白天模式的颜色 cell.contentView.backgroundColor = [UIColor whiteColor]; } else { //夜间模式的颜色 cell.contentView.backgroundColor = [UIColor darkGrayColor]; } return cell;}//选中cell- tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { self.startButton.selected = YES; self.index = indexPath.row; //读取音乐 播放音乐 [self loadMusic]; [self.player play];}//夜间模式选择按钮- tintModelClick:(UISegmentedControl *)sender { if (sender.selectedSegmentIndex == 0) { //白天模式 self.view.backgroundColor = [UIColor whiteColor]; //在cell方法里设置了cell的相关颜色,所以需要重新加载数据 [self.tableView reloadData]; } else { //夜间模式 self.view.backgroundColor = [UIColor darkGrayColor]; [self.tableView reloadData]; }}@end

②进度条开始随歌曲的播放往前走;

③图片开始随歌曲播放旋转;

那么相对应的,再次点击播放按钮的时候,我们就可以让它实现暂停:

③让播放时间计时同时暂停;

注意:上述开始暂停操作一定要同步!

理清楚我们的思路以后,就可以来一 一实现了~

点击播放/暂停

 //点击播放、暂停 function start{ imagePause(); play[index].pause; play[index].play; addtime; for (var i=0;i因为播放和暂停在同一个按钮上,所以都会调用上述方法,我们来详细看一下各个函数都实现了怎样的功能:图片旋转//图片旋转,每30毫米旋转5度 function rotate(){ var deg=0; flag=1; timer=setInterval{ image.style.transform="rotate"; deg =5; if{ deg=0; } },30); }

上述是图片转动的函数,当音乐播放的时候调用rotate()函数,就可以实现图片的旋转!

同样清除定时器的函数,当音乐暂停的时候调用imagePause(),图片旋转的定时器被清除掉:

function imagePause(){ clearInterval; flag=0; }

这样图片旋转的功能我们就已经实现了~

进度条

先定义两个宽度长度大小一样 颜色不同的两个div,利用currenttime属性来过去当前的播放的时间,设一个div一开始的长度为零,然后通过当前播放的事件来调整div长度大小就能实现滚动条的效果了。

function jindutiao(){ //获取当前歌曲的歌长 var lenth=play[index].duration; timer1=setInterval{ cur=play[index].currentTime;//获取当前的播放时间 fillbar.style.width="" parseFloat*300 "px"; },50)}

这样,进度条就完成啦~

播放时间

音乐的播放时间也是利用currenttime来随时改变,不过应该注意currenttime的计时单位为秒。

//播放时间 function addtime(){ timer2=setInterval{ cur=parseInt(play[index].currentTime);//秒数 var temp=cur; minute=parseInt; if{ time.innerHTML="" minute ":0" cur` ""; }else{ time.innerHTML="" minute ":" cur` ""; } },1000);}

2切歌我做了两种方式实现切歌:

①点击上一曲、下一曲按钮实现切歌;

 //上一曲 function reduce; reducejindutiao; index--; if{ index=play.length-1; } start(); } //下一曲 function add; reducejindutiao; index  ; if{ index=0; } start(); }

②点击歌名,实现歌曲的切换;

 //点击文字切歌 function change{ var musicName=e.target; //先清空所有的 for (var i=0;i注意:在切歌时不要忘了我们的进度条!将进度条滚动的定时器清除掉,然后div的长度还原为0;//将进度条置0 function reducejindutiao(){ clearInterval; fillbar.style.width="0"; }

 //音乐停止 function pauseall(){ for (var i=0;i function qingkong(){//清空所有的计时器 imagePause(); clearInterval; }

3点击进度条调整播放进度及音量

首先应该理清一下逻辑:当点击进度条的时候,滚动条的宽度应该跟鼠标的offsetX一样长,然后根据进度条的长度来调整听该显示的时间。

给滚动条的div添加一个事件,当滚动条长度变化的时候歌曲的当前播放的时间调整,300是滚动条的总长度;

//调整播放进度 function adjust{ var bar=e.target; var x=e.offsetX; var lenth=play[index].duration; fillbar.style.width=x "px"; play[index].currentTime="" parseInt ""; play[index].play 改变音量的滚动条,跟改变播放时间类似,利用volume属性; //调整音量大小 function changeVolume{ var x=e.offsetX 20; play[index].volume=parseFloat*1; //改变按钮的位置 volume3.style.left="" x "px";}

4随机、循环播放

循环播放音乐的时候,直接index 当index的范围超过歌曲的长度的时候,index=0重新开始。随机播放的函数类似,当歌曲播放完毕的时候,随机产生一个0到play.length的数字就可以了。

 //随机播放歌曲 function suiji{ var img=e.target; img2.style.border=""; img.style.border="1px solid red"; } //顺序播放 function shunxu{ var img=e.target; img1.style.border=""; img.style.border="1px solid red"; clearInterval; shunxuplay=setInterval{ if{ add; }

这样我们整个音乐播放器就完成了,大家可以自己写一个好看的界面,就更完美了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

TAG标签:
版权声明:本文由美高梅网投平台发布于美高梅网投网址,转载请注明出处:使用AVAudioPlayer实现本地音乐播放器,HTML5网页音