小文的个人博客|首页

[[ slider_text ]]

[[ item.c]]

给博客添加音乐

发布时间: 2022-04-20 作者: 小文来源: 小文的个人博客

vue

经过几天各种方案的选取，我在网上发现了个音乐播放器

名叫aplayer

然后看它的官方文档

[首页 - APlayer](https://aplayer.js.org/#/zh-Hans/)

然后下载它的js和css，引入就可以使用了

我使用的是吸底模式

```JavaScript
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    theme: '#409eff',
    fixed: true,
    mutex:true,
    listFolded: true,
    preload: 'auto',
    listMaxHeight: 10,
    storageName: 'aplayer-setting',
    lrcType: 3,
    volume: 0.7,
    audio: [
        {
            name: '少一点天分',
            artist: '孙盛希',
            url: 'http://music.163.com/song/media/outer/url?id=543798652.mp3',
            cover: 'http://p1.music.126.net/1QT6pMrufe1LjwVOgDJ81w==/109951163176818589.jpg?param=130y130',
            lrc: '/static/my/music/lrc/少一点天分-孙盛希.lrc', #自己下载下来
            theme: '#46718b'
        },
        {
            name: '女孩',
            artist: '抖音热播',
            url: 'http://music.163.com/song/media/outer/url?id=1859715428.mp3',
            cover: 'http://p2.music.126.net/ivIoOrhtR_AIpS5umBAc6Q==/109951166131589392.jpg?param=130y130',
            lrc: '/static/my/music/lrc/女孩dj-抖音热播.lrc',
            theme: '#46718b'
        },
    ]

});
```

这样你就创建了一个播放器，数据也可以你自己后台生成，我嫌太麻烦了，以后在搞吧！

但是你会发现，你在刷新页面时，播放器也会跟着刷新，

对此我们采用本地存储（localStorage）的方式

### **一、什么是localStorage？**

在[HTML5](https://so.csdn.net/so/search?q=HTML5&spm=1001.2101.3001.7020)中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

所以我们将当前播放的歌曲列表位置，正在播放的时间，暂停还是播放存到本地

这里我们要用到onbeforeunload

### 二.**什么是**onbeforeunload**？**

onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。  
该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。

结合播放器的APi,代码如下:

```JavaScript
window.onbeforeunload = e => {
    //监听是否刷新，然后将音乐的索引和时间写入本地

localStorage.setItem('music_play', ap.audio.paused)//离开前记录的音乐状态
    localStorage.setItem('music_time', ap.audio.currentTime)//离开前记录的音乐时间
    localStorage.setItem('music_index', ap.list.index)//离开前记录的音乐
};
```

在写读取的代码

```JavaScript
let play = localStorage.getItem('music_play')
let music_index = localStorage.getItem('music_index')
let time = localStorage.getItem('music_time')

//不管要不要播放
ap.list.switch(music_index);
setTimeout(() => {
    ap.seek(parseInt(time) + 1);
}, 300)
//判断是否播放
if (play === "false") {
    console.log('播放')
    ap.play();
}
```

设置0.3秒的缓冲,防止音乐没加载出来

因为ap.audio.currentTime不是整数将他转化成整数 ,

再加1,让人感觉音乐没有停止

已经是第一篇啦已经是最后一篇啦

你觉得文章怎么样

xiwen

###666

3年前
点赞（0）回复（0）
xiwen

![emoji](https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/1e/2018new_taikaixin_org.png)

3年前
点赞（0）回复（0）
xiwen

666

3年前
点赞（1）回复（0）
xiwen

2022.3.20 10：57测试头像

3年前
点赞（15）回复（0）
xiwen

yaha

3年前
点赞（60）回复（1）

xiwen @ xiwen

人人

3年前
点赞（9）回复

小文的个人博客

给博客添加音乐

xiwen

xiwen

xiwen

xiwen

xiwen

xiwen @ xiwen