音乐播放器（主界面）

import

import

@interface MjMusicViewController : UIViewController
{
NSInteger controlPlayStyle;
NSInteger controlPlay;
NSMutableArray *timeArray;
NSMutableDictionary *LRCDictionary;
NSUInteger lrcLineNumber;
}

@end

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

import "MjMusicViewController.h"

import "DXSemiViewControllerCategory.h"

import

define kLrcTableView 10001

//#define kPlaySequent 1;
//#define kPlayRandom 2;
//#define kPlayCircle 3;

static NSString *songIdentify = @"songIdentify";
@interface MjMusicViewController ()

@property (retain, nonatomic) IBOutlet UIView *controlView;
@property (retain, nonatomic) IBOutlet UIImageView *imageView;
@property (nonatomic,retain)AVAudioPlayer *audioPlayer;
@property (retain, nonatomic) IBOutlet UIButton *songBtn;
@property (retain, nonatomic) IBOutlet UIButton *playStyleBtn;
@property (retain, nonatomic) IBOutlet UISlider *sliderProgress;
@property (retain, nonatomic) IBOutlet UIButton *controlBtn;
@property (retain, nonatomic) IBOutlet UIButton *priorSongBtn;
@property (retain, nonatomic) IBOutlet UIButton *nextSongBtn;
@property (retain, nonatomic) IBOutlet UILabel *labelAllTime;
@property (retain, nonatomic) IBOutlet UILabel *labelProgressTime;
@property (retain, nonatomic) IBOutlet UISlider *sliderVolume;
@property (retain, nonatomic) IBOutlet UILabel *songNameLabel;
@property (retain, nonatomic) IBOutlet UITableView *lrcTableView;

@property (nonatomic,retain)NSArray *songsDataSource;
@property (nonatomic,assign)NSInteger musicNum;
@property (nonatomic,retain)NSString *currentSong;
@property (nonatomic ,retain)UITableView *songTableView;
@property (nonatomic,retain)NSURL *soundURL;

@end

@implementation MjMusicViewController
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
self.songsDataSource = @[@"光辉岁月",@"Never Give Up",@"怒放的生命",@"你给我听好",@"You Belong With Me",@"Stay Beautiful",@"我只在乎你",@"泡沫"];

}
return self;

}

  • (void)viewDidLoad
    {
    [super viewDidLoad];
    controlPlayStyle = 2;
    controlPlay = 1;
    self.controlView.alpha = 0.6f;
    self.controlView.backgroundColor = [UIColor lightGrayColor];
    self.view.backgroundColor = [UIColor lightGrayColor];
    self.navigationController.navigationBarHidden = YES;

    self.imageView.animationImages = @[[UIImage imageNamed:@"scene1.jpg"],
    [UIImage imageNamed:@"scene2.jpg"],
    [UIImage imageNamed:@"scene3.jpg"],
    [UIImage imageNamed:@"scene4.jpg"],
    [UIImage imageNamed:@"scene5.jpg"],
    ];

    self.imageView.animationDuration = 20.0;
    [self.imageView stopAnimating];
    [self.view addSubview:self.imageView];
    [self.imageView addSubview:self.songNameLabel];
    [self.imageView addSubview:self.labelProgressTime];
    [self.imageView addSubview:self.labelAllTime];
    [self.imageView addSubview:self.sliderProgress];
    [self.imageView addSubview:self.controlView];
    [self.imageView addSubview:self.lrcTableView];

// 为了显示歌词

self.lrcTableView.tag = 10001;
self.lrcTableView.backgroundColor = [UIColor clearColor];
self.lrcTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
self.lrcTableView.dataSource = self;
self.lrcTableView.delegate =self;
lrcLineNumber = 0;

timeArray = [[NSMutableArray alloc] initWithCapacity:10];
LRCDictionary = [[NSMutableDictionary alloc] initWithCapacity:10];

// 初始化歌词
[self initLRC];

[NSTimer scheduledTimerWithTimeInterval:0.1
                                 target:self
                               selector:@selector(onTimer:)
                               userInfo:nil repeats:YES];
self.soundURL = [[NSBundle mainBundle] URLForResource:@"光辉岁月" withExtension:@"mp3"];
self.musicNum = 0;
NSError *error = nil;
self.audioPlayer = [[AVAudioPlayer alloc]initWithContentsOfURL:self.soundURL error:&error];
self.audioPlayer.delegate = self;
self.audioPlayer.numberOfLoops = 0;

if (nil != error) {
    NSLog(@"Error:%@",error);
}

[self.audioPlayer prepareToPlay];

[self.controlBtn setBackgroundImage:[UIImage imageNamed:@"play"]
                           forState:UIControlStateNormal];
[self.playStyleBtn setBackgroundImage:[UIImage imageNamed:@"mode_orderplay"]
                             forState:UIControlStateNormal];
self.songNameLabel.text = @"光辉岁月";

// 初始化Slider
self.sliderProgress.minimumValue = 0.0;
self.sliderProgress.maximumValue = self.audioPlayer.duration;
[self.sliderProgress setThumbImage:[UIImage imageNamed:@"mvvoiceSliderThumb"] forState:UIControlStateNormal];
[self.sliderVolume setThumbImage:[UIImage imageNamed:@"mvvoiceSliderThumb"] forState:UIControlStateNormal];
//格式化label显示时间
[self ruleTimeLabel:self.labelAllTime andTime:self.audioPlayer.duration];

//添加UISongTableView
CGRect songTableFrame = CGRectMake(320, 50, 300, 430);
self.songTableView = [[UITableView alloc ]initWithFrame:songTableFrame
                                                  style:UITableViewStylePlain];
self.songTableView.alpha = 0.6f;
self.songTableView.dataSource = self;
self.songTableView.delegate = self;
[self.songTableView registerClass:[UITableViewCell class]
           forCellReuseIdentifier:songIdentify];

// 添加手势
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc ]
initWithTarget:self
action:@selector(onSingleTap:)];
// 表示多点触摸时的手指数量
tapGesture.numberOfTouchesRequired = 1;
// 表示轻拍的次数，现在一个手指轻拍一次，也就是单击的动作
tapGesture.numberOfTapsRequired = 1;
// 为视图view添加上手势的动作处理
[self.imageView addGestureRecognizer:tapGesture];

}

pragma mark -

pragma mark dataSource

  • (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    {
    if (tableView.tag == kLrcTableView) {
    return timeArray.count;
    }else{
    return self.songsDataSource.count;
    }

}

  • (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
    static NSString *cellIdentifier = @"LRCCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
    if (tableView.tag == kLrcTableView) {
    if (cell == nil) {
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
    reuseIdentifier:cellIdentifier];
    }
    cell.selectionStyle = UITableViewCellSelectionStyleNone;//该表格选中后没有颜色
    cell.backgroundColor = [UIColor clearColor];
    if (indexPath.row == lrcLineNumber) {
    cell.textLabel.text = LRCDictionary[timeArray[indexPath.row]];
    cell.textLabel.textColor = [UIColor orangeColor];
    cell.textLabel.font = [UIFont systemFontOfSize:15];
    } else {
    cell.textLabel.text = LRCDictionary[timeArray[indexPath.row]];
    cell.textLabel.textColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.5];
    cell.textLabel.font = [UIFont systemFontOfSize:13];
    }
    cell.textLabel.backgroundColor = [UIColor clearColor];
    cell.textLabel.textAlignment = NSTextAlignmentCenter;
    }else
    {
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
    reuseIdentifier:cellIdentifier];
    cell.textLabel.text = self.songsDataSource[indexPath.row];
    cell.textLabel.textAlignment = NSTextAlignmentLeft;

    }

    return cell;

}
//行高
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return 35;
}

pragma mark -

pragma mark UITableView Delegate

  • (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
    {
    if (tableView.tag == kLrcTableView) {

    }else{
    self.currentSong = self.songsDataSource[indexPath.row];
    self.musicNum = indexPath.row;
    [self initLRC];
    self.songNameLabel.text = self.songsDataSource[indexPath.row];
    self.soundURL = [[NSBundle mainBundle] URLForResource:self.currentSong withExtension:@"mp3"];

    if ([self.audioPlayer isPlaying]) {
    [self.audioPlayer stop];
    [self changeSongs];
    [self.audioPlayer play];
    }
    else
    {
    [self changeSongs];
    [self.audioPlayer play];
    [self.controlBtn setBackgroundImage:[UIImage imageNamed:@"pause"]
    forState:UIControlStateNormal];
    }
    }

}

pragma mark -

pragma mark AVAudioPlayer Delegate

  • (void)audioPlayerDidFinishPlaying:(AVAudioPlayer *)player successfully:(BOOL)flag
    {

// if (!controlPlayStyle) {
// [self sequencePlay];
// self.audioPlayer.delegate = self;
// [self.audioPlayer play];
// }else{
// [self randomPlay];
// self.audioPlayer.delegate = self;
// [self.audioPlayer play];
// }
switch (controlPlay) {
case 1:
[self sequencePlay];
self.audioPlayer.delegate = self;
[self.audioPlayer play];
break;
case 2:
[self randomPlay];
self.audioPlayer.delegate = self;
[self.audioPlayer play];
break;
case 3:
self.audioPlayer.numberOfLoops = -1;
self.audioPlayer.delegate = self;
[self.audioPlayer play];
break;

    default:
        break;
}

}

pragma mark -

pragma mark 方法回调

  • (void)onTimer:(NSTimer *)timer
    {
    self.sliderProgress.value = self.audioPlayer.currentTime;
    [self ruleTimeLabel:self.labelProgressTime andTime:self.audioPlayer.currentTime];
    //调用歌词函数
    [self displaySondWord:self.audioPlayer.currentTime];
    }
  • (IBAction)sliderProgressBtn:(UISlider *)sender {
    self.audioPlayer.currentTime = self.sliderProgress.value;
    self.sliderProgress.value =sender.value;
    }
  • (IBAction)onSliderVolumeBtn:(UISlider*)sender {
    self.audioPlayer.volume = sender.value;
    }

//播放暂停控制按钮
- (IBAction)onControlBtn:(id)sender {
if ([self.audioPlayer isPlaying]) {
[self.controlBtn setBackgroundImage:[UIImage imageNamed:@"play"]
forState:UIControlStateNormal];
[self.audioPlayer pause];
}else{
[self.controlBtn setBackgroundImage:[UIImage imageNamed:@"pause"]
forState:UIControlStateNormal];
[self.audioPlayer play];
}
}

//得到歌曲列表
- (IBAction)onSongsBtn:(id)sender {
[UIView beginAnimations:@"animation" context:nil];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
[UIView setAnimationDuration:0.2];
CGRect frame = self.songTableView.frame;
frame.origin.x = 80;
self.songTableView.frame = frame;
[self.view addSubview:self.songTableView];
[UIView commitAnimations];

}

//上一首歌
- (IBAction)onPriorBtn:(id)sender {
if (self.musicNum == 0) {
self.musicNum = self.songsDataSource.count - 1;
[self changeToPlay];
}else{
self.musicNum -= 1;
[self changeToPlay];

}

}

//下一首歌
- (IBAction)onNextBtn:(id)sender {
if (self.musicNum == self.songsDataSource.count - 1) {
self.musicNum = 0;
[self changeToPlay];
}else{
self.musicNum += 1;
[self changeToPlay];

}
NSLog(@"%ld",(long)self.musicNum);

}

//随机播放
- (IBAction)onSongRudomBtn:(id)sender {
// if (controlPlayStyle == 2) {
// controlPlayStyle = YES;
// [self.playStyleBtn setBackgroundImage:[UIImage imageNamed:@"moderandplay"]
// forState:UIControlStateNormal];
// }else if(controlPlayStyle == 3)
// {
// controlPlayStyle = NO;
// [self.playStyleBtn setBackgroundImage:[UIImage imageNamed:@"modeorderplay"]
// forState:UIControlStateNormal];
// }
switch (controlPlayStyle) {
case 1:
[self.playStyleBtn setBackgroundImage:[UIImage imageNamed:@"modeorderplay"]
forState:UIControlStateNormal];
controlPlay = 1;
controlPlayStyle = 2;
break;
case 2:
[self.playStyleBtn setBackgroundImage:[UIImage imageNamed:@"moderandplay"]
forState:UIControlStateNormal];
controlPlay = 2;
controlPlayStyle = 3;
break;
case 3:
[self.playStyleBtn setBackgroundImage:[UIImage imageNamed:@"mode_repeatlist"]
forState:UIControlStateNormal];
controlPlay = 3;
controlPlayStyle = 1;
break;
default:
break;
}
}

//手势
- (void)onSingleTap:(UITapGestureRecognizer *)singleTap
{
[self.songTableView removeFromSuperview];
}

  • (void)viewWillAppear:(BOOL)animated
    {
    [super viewWillAppear:animated];
    [self.imageView startAnimating];
    }
  • (void)viewDidDisappear:(BOOL)animated
    {
    [super viewDidDisappear:YES];
    [self.imageView stopAnimating];
    }

//顺序播放
- (void)sequencePlay
{

    if (self.musicNum == self.songsDataSource.count - 1) {
        self.musicNum = 0;
        [self changeToPlay];

    }else{
        self.musicNum += 1;
        [self changeToPlay];

    }

}

//随机播放
- (void)randomPlay
{
// if (self.audioPlayer.currentTime >= self.audioPlayer.duration-1.05) {
NSInteger number = arc4random()%self.songsDataSource.count;
self.musicNum = number;
[self changeToPlay];

}

//切歌播放
- (void)changeToPlay
{
self.currentSong = self.songsDataSource[self.musicNum];
self.soundURL =[[NSBundle mainBundle] URLForResource:self.currentSong withExtension:@"mp3"];
timeArray = [[NSMutableArray alloc] initWithCapacity:10];
LRCDictionary = [[NSMutableDictionary alloc] initWithCapacity:10];
[self initLRC];
self.songNameLabel.text = self.songsDataSource[self.musicNum];
if ([self.audioPlayer isPlaying]) {
[self.audioPlayer stop];
[self changeSongs];
[self.audioPlayer play];
}else{
[self changeSongs];
}
self.audioPlayer.delegate = self;

}

//切歌
- (void)changeSongs
{
NSError *error = nil;
self.audioPlayer = [[AVAudioPlayer alloc]initWithContentsOfURL:self.soundURL
error:&error];

[self ruleTimeLabel:self.labelAllTime andTime:self.audioPlayer.duration];
self.sliderProgress.minimumValue = 0.0;
self.sliderProgress.maximumValue = self.audioPlayer.duration;
if (nil != error) {
    NSLog(@"Error:%@",error);
}

[self.audioPlayer prepareToPlay];

}

//时间格式
- (void)ruleTimeLabel:(UILabel *)label andTime:(float)time
{
NSDateFormatter *date = [[NSDateFormatter alloc]init];
[date setDateFormat:@"mm:ss"];

label.text = [date stringFromDate:[NSDate dateWithTimeIntervalSince1970:time]];

}

pragma mark 得到歌词

  • (void)initLRC {
    NSString *LRCPath = [[NSBundle mainBundle] pathForResource:self.songsDataSource[self.musicNum] ofType:@"lrc"];
    NSString *contentStr = [NSString stringWithContentsOfFile:LRCPath encoding:NSUTF8StringEncoding error:nil];
    // NSLog(@"contentStr = %@",contentStr);
    NSArray *array = [contentStr componentsSeparatedByString:@"\n"];
    for (int i = 0; i < [array count]; i++) {
    NSString *linStr = [array objectAtIndex:i];
    NSArray *lineArray = [linStr componentsSeparatedByString:@"]"];
    if ([lineArray[0] length] > 8) {
    NSString *str1 = [linStr substringWithRange:NSMakeRange(3, 1)];
    NSString *str2 = [linStr substringWithRange:NSMakeRange(6, 1)];
    if ([str1 isEqualToString:@":"] && [str2 isEqualToString:@"."]) {
    NSString *lrcStr = [lineArray objectAtIndex:1];
    NSString *timeStr = [[lineArray objectAtIndex:0] substringWithRange:NSMakeRange(1, 5)];//分割区间求歌词时间
    //把时间 和 歌词 加入词典
    [LRCDictionary setObject:lrcStr forKey:timeStr];
    [timeArray addObject:timeStr];//timeArray的count就是行数
    }
    }
    }
    }

    pragma mark 动态显示歌词

  • (void)displaySondWord:(NSUInteger)time {
    // NSLog(@"time = %u",time);
    for (int i = 0; i < [timeArray count]; i++) {

    NSArray *array = [timeArray[i] componentsSeparatedByString:@":"];//把时间转换成秒
NSUInteger currentTime = [array[0] intValue] * 60 + [array[1] intValue];
if (i == [timeArray count]-1) {
    //求最后一句歌词的时间点
    NSArray *array1 = [timeArray[timeArray.count-1] componentsSeparatedByString:@":"];
    NSUInteger currentTime1 = [array1[0] intValue] * 60 + [array1[1] intValue];
    if (time > currentTime1) {
        [self updateLrcTableView:i];
        break;
    }
} else {
    //求出第一句的时间点，在第一句显示前的时间内一直加载第一句
    NSArray *array2 = [timeArray[0] componentsSeparatedByString:@":"];
    NSUInteger currentTime2 = [array2[0] intValue] * 60 + [array2[1] intValue];
    if (time < currentTime2) {
        [self updateLrcTableView:0];
        //                NSLog(@"马上到第一句");
        break;
    }
    //求出下一步的歌词时间点，然后计算区间
    NSArray *array3 = [timeArray[i+1] componentsSeparatedByString:@":"];
    NSUInteger currentTime3 = [array3[0] intValue] * 60 + [array3[1] intValue];
    if (time >= currentTime && time <= currentTime3) {
        [self updateLrcTableView:i];
        break;
    }

}

    }
    }

pragma mark 动态更新歌词表歌词

  • (void)updateLrcTableView:(NSUInteger)lineNumber {
    // NSLog(@"lrc = %@", [LRCDictionary objectForKey:[timeArray objectAtIndex:lineNumber]]);
    //重新载入 歌词列表lrcTabView
    lrcLineNumber = lineNumber;
    [self.lrcTableView reloadData];
    //使被选中的行移到中间
    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:lineNumber inSection:0];
    [self.lrcTableView selectRowAtIndexPath:indexPath
    animated:YES
    scrollPosition:UITableViewScrollPositionMiddle];
    // NSLog(@"%i",lineNumber);
    }
  • (void)didReceiveMemoryWarning
    {
    [super didReceiveMemoryWarning];

}

@end

音乐播放器（主界面）

时间： 2024-08-30 16:02:21

音乐播放器（主界面）的相关文章

【程序开发小记】VB.NET音乐播放器

写在前面的话: 为了营造一个很好的交流学习的环境,也是为了迎合学校毕业设计的需求,开通了博客园.在下学期伊始,会每星期更新毕业设计的进度.博客业已开通,为了交流学习,要只是更新毕业设计的进度显得有些做作.博主并不是好看书时写些小评的主儿,遂不知有和内容好献于此,只得将之前课程中或是实习时开发的程序在此做个简述. 因这些项目也是博主心血,也是怕某些学弟学妹直接搬用引发事端,不便将源码原封不动摆在这里,在此只做简要说明. 若有意愿交流学习,可以在评论或是私信留下联系方式. 话不多说,接下来直奔主题.

模仿天天动听5可联网下载歌词的音乐播放器

模仿天天动听5可联网下载歌词的音乐播放器 这是一个高仿天天动听5的android版音乐播放器,界面华丽功能完整,除了本地播放器应有的那些功能另外还添加了程序内直接在线匹配下载歌词(联网可用,数据源来自百度音乐盒).皮肤背景更换.摇一摇换歌等功能,本源码是一个综合型的项目,涉及到slidemenu.pinyin4j.lrc.service.fragment.aidl.sqlite等知识,项目有比较完整的注释项目没有广告质量较高. 下载地址:http://www.devstore.cn/code/i

iOS 简单音乐播放器 界面搭建

如图搭建一个音乐播放器界面,具备以下几个简单功能: 1,界面协调,整洁. 2,点击播放,控制进度条. 3.三收藏歌曲,点击收藏,心形收藏标志颜色加深. 4,左右按钮,切换歌曲图片和标题. 5,点击中间图片,隐藏所有按钮,仅显示蓝色背景. 设计的整体思路: 1.在搭建界面的时候,为了整洁和方便后续的功能的添加,需要将整个的界面划分为几个部分: ①:最上面的一行包括:一个返回按钮.一个歌曲名称.一个收藏按钮: ②:第二行:一个slider控件.两侧是当前的歌曲播放进度和歌曲的总时长--两个lable

Android 音乐播放器--界面的实现(一)

暑假学了十几天安卓还是感觉很陌生,感觉是时候写个小项目巩固下了,于是就有了这个简单的音乐播放器, 界面是模仿的网易云音乐,图标的资源也是从网易云音乐取的,效果如图: 已实现功能: 选择播放模式:循环 顺序 随机 音乐控制:播放 暂停 下一曲 上一曲 专辑图片的显示 未实现功能: 歌词的显示 歌曲搜索 网络歌曲: 因为开始以为qq音乐之类的提供了api..后来发现是我想多了,所以这个功能多半实现不了了 标题栏 标题栏我把它单独写了个文件,在需要使用它的地方只需要写<include layout=&qu

我的音乐播放器（1）ui界面

我的音乐播放器的UI 布局文件:很简单就是一个ListView展示歌曲的列表, 中间进度条显示歌曲的播放进度,和通过拖动来改变 播放的进度. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_p

手把手教你做音乐播放器（八）桌面小工具（上）

第8节 桌面小工具 桌面小工具是可以放置在主界面的.快速控制应用的小助手.例如我们的音乐小工具,它可以帮助用户在桌面上就完成音乐的暂停.播放.切换等操作,而不需要启动应用本身. 在安卓系统中,我们也常常叫它App widget. 实现一个App widget要经过以下几个步骤, 创建一个App widget类,让它继承自AppWidgetProvider,例如AnddleMusicAppWidget类: 放在res\layout目录下,为App widget的界面定义一个布局,例如anddle_

毕业设计——基于STM32的音乐播放器设计（一）

基于STM32的音乐播放器设计, 源代码下载地址:http://download.csdn.net/detail/cxp2205455256/8334021      SD卡文件下载地址:http://download.csdn.net/detail/cxp2205455256/8334089 电路图下载地址:文件太大了,上传不了....... 以下是截图: 1.硬件电路 2.软件主界面 3.音乐播放器界面 4.音乐定时播放界面 5.音乐列表界面 6.日历功能界面 9.温度功能界面 10.计算器

Qt版音乐播放器

    Qt版音乐播放器 转载请标明出处:牟尼的专栏 http://blog.csdn.net/u012027907 一.关于Qt 1.1 什么是Qt Qt是一个跨平台应用程序和UI开发框架.使用Qt只需一次性开发应用程序,无需重新编写源代码,便可跨不同桌面和嵌入式操作系统部署这些应用程序. Qt Creator是全新的跨平台Qt IDE,可单独使用,也可与Qt库和开发工具组成一套完整的SDK,其中包括:高级C++代码编辑器,项目和集成管理工具,集成的上下文相关的帮助系统,图形化调试器,代码管理

4个小时实现一个HTML5音乐播放器

技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐播放器就要非常了解在Web中音频播放的方式,通常都采用HTML5的audio标签关于audio标签,它有大量的属性.方法和事件,在这里我就做一个大致的介绍. 属性:src:必需,音频来源:controls:常见,设置后显示浏览器默认的audio控制面板,不设置默认隐藏audio标签:autoplay