https://github.com/IFmiss/wx-audio

:evergreen_tree: 原生js实现微信公众号音乐播放器 A WeChat music player component
https://github.com/IFmiss/wx-audio

audio music weixin weixin-audio weixin-music wx

Last synced: about 1 month ago
JSON representation

:evergreen_tree: 原生js实现微信公众号音乐播放器 A WeChat music player component

• Host: GitHub
• URL: https://github.com/IFmiss/wx-audio
• Owner: IFmiss
• Created: 2017-09-08T10:17:01.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-03-10T14:18:56.000Z (9 months ago)
• Last Synced: 2024-08-03T09:10:37.373Z (4 months ago)
• Topics: audio, music, weixin, weixin-audio, weixin-music, wx
• Language: JavaScript
• Homepage: http://www.daiwei.org/components/wx-audio/html/audio.html
• Size: 14.9 MB
• Stars: 68
• Watchers: 5
• Forks: 22
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-github-star - wx-audio

README

        
# wx-audio

微信公众号音乐播放器

#### 基于原生js写的一款仿微信公众号的音乐组件

## 演示地址

http://www.daiwei.org/components/wx-audio/

## 手机预览

### 安装 

npm 安装

```js

  npm install @dw/wx-audio

```

### 引入

```js

  import WxAudio from '@dw/wx-audio/lib/wx-audio.css'

  import WxAudio from '@dw/wx-audio'

```

普通资源引入,先将lib文件下的目录放到自己的项目中，然后根据路径引入

```html

```

### 实例化 音乐组件 

```js

var wxAudio = new WxAudio({

  ele: '#textaudio1',

  title: '河山大好',

  disc: '许嵩',

  src: 'http://oiq8j9er1.bkt.clouddn.com/%E8%AE%B8%E5%B5%A9%20-%20%E6%B2%B3%E5%B1%B1%E5%A4%A7%E5%A5%BD1.mp3',

  width: '320px',

  autoplay: true,

  loop: true,

  ended: function () {

    alert('播放结束')

  }

});

```

### 属性

  - ele dom对象

  - title 音乐标题

  - disc 描述，可以当做显示歌手名称

  - src 地址

  - width 显示的宽度

  - loop 是否循环（当循环状态下时候，ended事件不会执行）

  - ended 方法，是一个回调，可在音乐播放结束之后执行其他的代码

  - autoplay 属性， 是否自动播放，这个只能在微信浏览器以及只设置静态src才能自动播放

### 方法

```js

 // 实例化的wxAudio可以这样操作

wxAudio.audioPlay()   // 播放

wxAudio.audioPause()   // 暂停

wxAudio.audioPlayPause()  // 播放暂停

wxAudio.showLoading(bool)  //显示加载状态  参数bool

 

wxAudio.audioCut(src,title,disc)  实现音频切换的效果

```

### 新增 音乐组件切歌方法 

通过实例化的wxAudio的audioCut(src,title,disc)  实现音频切换的效果  示例代码如下

```js

  var src = 'http://oiq8j9er1.bkt.clouddn.com/%E6%9E%97%E4%BF%8A%E6%9D%B0%20-%20%E5%A5%B9%E8%AF%B41.mp3'

  var title = '她说'

  var disc = '林俊杰'

  wxAudio.audioCut(src, title, disc)

```