Audio 音频播放

原生方法

简单使用audio标签即可实现音频播放。

                           <audio src="https://src.axui.cn/v1.0/examples/media/audio.mp3" controls="controls">
                                    您的浏览器不支持播放该音频
                           </audio>

Aplayer PLUGIN

Aplayer是国产的优秀音频播放插件，参数齐全，风格多样，详见官网或者Github。本框架在v1.10.1基础上进行简单的修改，具体修改内容如下：

修改fixed的位置为左侧居中
新增参数bottom，默认false；fixed和bottom启用一个就好。
音频文件新增href参数，即音频的远程地址。
修改插件图标，风格更统一。
修改播放器html结构。

<script src="https://src.axui.cn/v1.0/src/plugins/aplayer/js/APlayer.min.js"></script>
<script type='text/javascript'>
 const basis = new APlayer({
            element: document.getElementById('player-basis'),
            audio: [{
                url: 'https://www.17sucai.com/preview/847335/2018-03-06/audioplayer/aa.mp3',
            }]
        });
</script>

                                   <div id="player-basis" class="ax-aplayer"></div>

带歌单

<script src="https://src.axui.cn/v1.0/src/plugins/aplayer/js/APlayer.min.js"></script>
<script type='text/javascript'>
const list = new APlayer({
            element: document.getElementById('player-list'),
            audio: [{
                name: 'Jar Of Love',
                artist: '曲婉婷',
                url: 'https://www.17sucai.com/preview/847335/2018-03-06/audioplayer/aa.mp3',
                cover: 'https://www.17sucai.com/preview/847335/2018-03-06/audioplayer/zz.jpg',
            }, {
                name: '光るなら',
                artist: 'Goose house',
                url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
                cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
            }]
        });
</script>

                                   <div id="player-list" class="ax-aplayer"></div>

迷你型

<script src="https://src.axui.cn/v1.0/src/plugins/aplayer/js/APlayer.min.js"></script>
<script type='text/javascript'>
const mini = new APlayer({
            element: document.getElementById('player-mini'),
            mini: true,
            audio: [{
                name: 'Jar Of Love',
                artist: '曲婉婷',
                url: 'https://www.17sucai.com/preview/847335/2018-03-06/audioplayer/aa.mp3',
                cover: 'https://www.17sucai.com/preview/847335/2018-03-06/audioplayer/zz.jpg',
            }]
        });
</script>

                                   <div id="player-mini" class="ax-aplayer"></div>

带歌词

<script src="https://src.axui.cn/v1.0/src/plugins/aplayer/js/APlayer.min.js"></script>
<script type='text/javascript'>
const lyrics = new APlayer({
            element: document.getElementById('player-lyrics'),
            lrcType: 3,
            audio: [{
                name: '光るなら',
                artist: 'Goose house',
                url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
                cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
                lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.lrc',
            }]
        });
</script>

                                   <div id="player-lyrics" class="ax-aplayer"></div>

角落固定

打开

<script src="https://src.axui.cn/v1.0/src/plugins/aplayer/js/APlayer.min.js"></script>
<script type='text/javascript'>
        const fixed = new APlayer({
            element: document.getElementById('player-fixed'),
            fixed: true,
            lrcType: 3,
            audio: [{
                name: 'Jar Of Love',
                artist: '曲婉婷',
                url: 'https://www.17sucai.com/preview/847335/2018-03-06/audioplayer/aa.mp3',
                cover: 'https://www.17sucai.com/preview/847335/2018-03-06/audioplayer/zz.jpg',
            }, {
                name: '光るなら',
                artist: 'Goose house',
                url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
                cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
            }]
        });
        $("#open-fixed").click(function () {
            $("#player-fixed").css("left","0");
            fixed.play();
        });
</script>

                                   <a href="###" class="ax-btn ax-primary" id="open-fixed">打开</a>
                                   <div id="player-fixed" class="ax-aplayer" style="left: -1000px;"></div>

底部通栏固定

打开

<script src="https://src.axui.cn/v1.0/src/plugins/aplayer/js/APlayer.min.js"></script>
<script type='text/javascript'>
const bottom = new APlayer({
            element: document.getElementById('player-bottom'),
            bottom: true,
            listFolded:true,
            lrcType: 3,
            audio: [{
                name: 'Jar Of Love',
                artist: '曲婉婷',
                url: 'https://www.17sucai.com/preview/847335/2018-03-06/audioplayer/aa.mp3',
                cover: 'https://www.17sucai.com/preview/847335/2018-03-06/audioplayer/zz.jpg',
                href:'http://www.baidu.com',
            }, {
                name: '光るなら',
                artist: 'Goose house',
                url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
                cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
                href:'####',
            }]
        });
        $("#open-bottom").click(function () {
            $("#player-bottom").css("bottom","0");
            bottom.play();
        });
</script>

                                   <a href="###" class="ax-btn ax-primary" id="open-bottom">打开</a>
                                   <div id="player-bottom" class="ax-aplayer" style="bottom: -1000px;"></div>

使用第三方歌单

如果需要使用网易音乐或者腾讯音乐的歌单需要引用MetingJS，具体使用方法详见Github。本框架目前所使用的版本是v1.2。

<script src="https://src.axui.cn/v1.0/src/plugins/aplayer/js/APlayer.min.js"></script>
<script src="https://src.axui.cn/v1.0/src/plugins/aplayer/js/Meting.min.js"></script>
<script type='text/javascript'>
   const tencent = new APlayer({
            element: document.getElementById('player-tencent'),
            mutex: true,
            order: 'random',
            lrcType: 3,
        });

        const netease = new APlayer({
            element: document.getElementById('player-netease'),
            mutex: true,
            order: 'random',
            lrcType: 3,

        });
</script>

                                <div id="player-tencent" class="ax-aplayer" data-id="7532668454" data-server="tencent" data-type="playlist" data-mode="fixed"></div>
                                <div class="ax-break"></div>
                                <div id="player-netease" class="ax-aplayer" data-id="5038726201" data-server="netease" data-type="playlist" data-mode="fixed"></div>