QQ音乐player解析

<!DOCTYPE html>
<!-- saved from url=(0039)http://y.qq.com/m/demo/2017/player.html -->
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Text</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
</head>

<body>

    <div class="action-list">
        <button class="js_demo5">歌曲链接</button>
    </div>

    <script src="http://y.gtimg.cn/music/h5/player/player.js"></script>

    <script>

        var params = {};
        var player = new Player(params);
        player.loop = false;

        var callback = function (e) {
            player.loop = false;
            player.play("http://ws.stream.qqmusic.qq.com/lm005d9e8facb91a60f36de44b85ec7a6893.mp3", { target: "auto" });
        }

        window.addEventListener("click", callback)

    </script>

</body>

</html>
<!DOCTYPE html>
<!-- saved from url=(0039)http://y.qq.com/m/demo/2017/player.html -->
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>QQ音乐H5音频播放器Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
</head>

<body>

    <div class="action-list">
        <button class="js_demo5">歌曲链接</button>
    </div>

    <script src="http://y.gtimg.cn/music/h5/player/player.js"></script>

    <script>
        var utils = {

            ontap: function (elem, callback) {
                if (typeof elem == "string") {
                    elem = document.querySelector(elem);
                }
                if (elem) {
                    if (utils.touch) {
                        elem.addEventListener("touchstart");
                        elem.addEventListener("touchmove");
                        elem.addEventListener("touchend");
                    } else {
                        elem.addEventListener("click", callback);
                    }
                }
                return this;
            }

        }

        var params = {};
        var player = new Player(params);

        utils
            .ontap(".js_demo5", function (e) {
                player.loop = false;
                player.play("http://ws.stream.qqmusic.qq.com/lm005d9e8facb91a60f36de44b85ec7a6893.mp3", { target: "auto" });
            })

    </script>

</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script src="https://y.gtimg.cn/music/h5/player/player.js?max_age=2592000"></script>
    <script>
        // 初始化播放组件
        var player = new QMplayer({ target: "auto" }); // 设置 target=music 时会拉起QQ音乐客户端进行播放
        player.loop = false;
        // 播放歌曲


        var callback = function (e) {
            alert(123)
            player.play("http://ws.stream.qqmusic.qq.com/lm005d9e8facb91a60f36de44b85ec7a6893.mp3");
        }

        // 监听事件
        window.addEventListener("click", callback)

// 支持的方法:play、pause、toggle、playReady、on、off
// 支持的事件:play、pause、ended、timeupdate、waiting、error
    </script>
</body>

</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值