Audio 音频播放

原生方法

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

                           <audio src="https://src.axui.cn/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/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/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/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/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/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/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/src/plugins/aplayer/js/APlayer.min.js"></script>
    <script src="https://src.axui.cn/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>