美文网首页
手把手教你:如何在页面上增加音乐播放

手把手教你:如何在页面上增加音乐播放

作者: 苦难_69e0 | 来源:发表于2022-01-07 16:04 被阅读0次

    前言

    看着博客听着歌

    链接

    还是各个大神的链接

    https://github.com/MoePlayer/APlayer
    https://github.com/metowolf/MetingJS

    #步骤

    1.在页尾html框贴入下面的代码(引用的css和js不用多说就是大佬开源的啦)

    <pre style="box-sizing: border-box; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding, margin, color, opacity; overflow: auto; margin: 0px; padding: 0px; list-style-type: none; list-style-image: none; font-family: &quot;Courier New&quot;; font-size: 12px; overflow-wrap: break-word;">        
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
            <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
            <meting-js id="8418150" server="netease" type="playlist" fixed="true" listfolded="true" order="random" theme="#F58EA8"></meting-js>
            <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
    </pre>
    

    2.修改下参数,主要是id和server

    大功告成!

    #参数

    常用参数:(更多的大家可以自己到GitHub上去看,就上面那两个链接啦)

    id: 歌曲/专辑/歌单 ID
    server: 音乐平台,支持如下参数
        netease (网易云音乐)
        tencent (qq音乐)
        xiami (虾米音乐)
        kugou (酷狗音乐)
        baidu (百度音乐)
    type: 请求类型,支持如下参数
        song (单曲)
        album (专辑)
        playlist (歌单)
        search (搜索)
    mode: 播放模式
        random (随机)
        single (单曲)
        circulation (列表循环)
        order (列表)
    autoplay: 自动播放
        false
        true
    

    想要自己魔改或者更多参数介绍,访问上面的那两个链接。

    前言

    看着博客听着歌

    链接

    还是各个大神的链接

    https://github.com/MoePlayer/APlayer
    https://github.com/metowolf/MetingJS

    步骤

    1.在页尾html框贴入下面的代码(引用的css和js不用多说就是大佬开源的啦)

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
    <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
    <div id="aplayer" class="aplayer" data-id="8418150" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8"></div>
    <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
    

    2.修改div里的参数,主要是data-id和data-server

    大功告成!

    参数

    data-id: 歌曲/专辑/歌单 ID
    
    data-server: 音乐平台,支持如下参数
    netease (网易云音乐)
    tencent (qq音乐)
    xiami (虾米音乐)
    kugou (酷狗音乐)
    baidu (百度音乐)
    
    data-type: 请求类型,支持如下参数
    song (单曲)
    album (专辑)
    playlist (歌单)
    search (搜索)
    
    data-mode: 播放模式
    random (随机)
    single (单曲)
    circulation (列表循环)
    order (列表)
    
    data-autoplay: 自动播放
    false
    true
    

    想要自己魔改或者更多参数介绍,访问上面的那两个链接啦。

    原文地址:https://www.cnblogs.com/wmg92/p/13470617.html

    小demo

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    <!--音乐-->
    <link rel="stylesheet" href="./APlayer.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
     <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script> 
     <div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="3025663508" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div>
    
    

    可能与上述描述不太相同,但是原理都差不多

    相关文章

      网友评论

          本文标题:手把手教你:如何在页面上增加音乐播放

          本文链接:https://www.haomeiwen.com/subject/spvjcrtx.html