# Audio

**Repository Path**: yoding/Audio

## Basic Information

- **Project Name**: Audio
- **Description**: js音乐播放器
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 7
- **Forks**: 1
- **Created**: 2019-03-29
- **Last Updated**: 2025-08-07

## Categories & Tags

**Categories**: multimedia

**Tags**: None

## README

# Audio

#### 介绍
js音乐播放器

#### 预览图
![audio预览图](https://images.gitee.com/uploads/images/2019/0330/102642_ab0175f7_811113.png "260e7fa7da42575b6b0fbc3f985d2b3.png")

#### 预览地址
http://yoding.gitee.io/audio/

#### 软件架构
软件基于jquery


#### 安装教程

1. 页面引入jquery
2. 页面引入css/audio.css
3. 页面引入js/audio.js

#### 使用说明

**属性**

    var audio=new Audio({
        top:"10px",//顶部距离
        right:"0px",//右侧距离
        bottom:"",//底部距离
		left:"",//左侧距离
        id:"audio",//选择元素的id
        bg:"res/audio_bg.jpg",//默认背景
        nextFn:function(obj){obj.play(obj.index+=1);},//点击下一曲事件
        endFn:function(obj){obj.play(obj.index+=1);},//播放完成事件
        list:[//播放列表，支持字符串和对象两种格式
            'res/01.mp3',//只传入链接地址
            {
                name:"dream it possible",//文件名称
                src:'res/02.mp3',//链接地址
                bg:"res/02.jpg"//背景图
            },
            'res/03.mp3'//文件不存在将会跳过
        ]
    });

**方法**
	
    audio.play();  //播放&暂停
    audio.play(n); //播放歌曲。参数可写下标，如 1,2,3;歌曲名称，如01.mp3,dream it possible;
    audio.next();  //播放下一首

#### 注意事项

 1. 由于chrome中不允许自动播放，请不要在加载完页面后马上调用play方法
 2. 由于会删除列表中播放失败的歌曲，list中元素的下标可能会改变