Press "Enter" to skip to content

这是一个播放全民K歌歌曲的网页播放器

内容目录

背景

上一篇我们讲到如何获取全民K歌歌曲信息(上一篇:这是一个获取全民K歌歌曲信息的composer包),那么这一篇我将继续带领大家实现一个开箱即用全民K歌版网页播放器。这里我们主要使用的一个开源网页播放器APlayer(github.com/MoePlayer/APlayer)。为了方便我们这里直接使用cdn外链的方式来使用。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>哼起小曲儿~</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }
        .container {
            max-width: 32rem;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="player" class="aplayer"></div>
    </div>
    <script src="https://unpkg.com/aplayer"></script>
    <script>
        var ap4 = new APlayer({
        element: document.getElementById('player'),
        narrow: false,
        autoplay: false,
        showlrc: false,
        mutex: true,
        theme: '#ad7a86',
        mode: 'random',
        music: [
            <?php
                require_once __DIR__ . '/vendor/autoload.php';
                use Jay\Kg\Music;
                $music = new Music();
                $more = $music->getMore(array('O58-ECO1_Hvq7Omg', 'O58-ECO1_dhz6OQZ'));
                foreach ($more as $one) {
            ?>
            {
                title: '<?php echo $one['data']['song_name']?>',
                author: '<?php echo $one['data']['singer_name']?>',
                url: '<?php echo $one['data']['playurl']?>',
                pic: '<?php echo $one['data']['fb_cover']?>',
            },
            <?php
                }
            ?>
        ]
});
    </script>
</body>
</html>

talk is cheap, just show you code, 上面我们直接贴出混编的代码。真正开箱即用。使用时你只需要替换

$more = $music->getMore(array('O58-ECO1_Hvq7Omg', 'O58-ECO1_dhz6OQZ'));

中的shareid即可。到这里一个开箱即用的全民K歌网页播放器就完成了。

 

3 Comments

  1. 阿伟
    阿伟 2017年12月30日

    请问我们的shareid怎么获得?

    • chenjie
      chenjie 2018年1月29日

      你可以看上上一篇就知道了,上一篇有讲的

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注