如何在HTML中导入Amplitude JS

Question

我刚开始进行网络开发，并且有一个“基本”问题。.我已经为我的哥哥（一个艺术家）建立了这个网站，然后我尝试将“ Amplitude js”（幅值js）导入html，以便我可以使用该音频播放器播放他的音乐。 我只希望播放器位于页面的中心，而不是整个页面的中心。

源文件位于https://github.com/521dimensions/amplitudejs

我尝试使用解释的第三种方法，并包括

 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/amplitudejs@{{3.2.1}}/dist/amplitude.js"></script> 

在我的html头部分。 没事

我只是不明白如何在我的html中实现它，因此它显示在页面中。

对我可能会错过的东西有任何想法吗？

Answer 1

首先，您必须包含资源javascript，例如：

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/amplitudejs@{{version-number}}/dist/amplitude.js"></script>

其次，调用Amplitude.init（{options}），如下所示：

Amplitude.init({
    "songs": [
        {
            "name": "Song Name 1",
            "artist": "Artist Name",
            "album": "Album Name",
            "url": "/song/url.mp3",
            "cover_art_url": "/cover/art/url.jpg"
        },
        {
            "name": "Song Name 2",
            "artist": "Artist Name",
            "album": "Album Name",
            "url": "/song/url.mp3",
            "cover_art_url": "/cover/art/url.jpg"
        },
        {
            "name": "Song Name 3",
            "artist": "Artist Name",
            "album": "Album Name",
            "url": "/song/url.mp3",
            "cover_art_url": "/cover/art/url.jpg"
        }
    ]
});

最后，声明幅度html，如下所示：

<span class="button amplitude-play-pause amplitude-paused" amplitude-playlist-main-play-pause="true" amplitude-playlist="{index}"></span> //Play pause button

这是振幅js的基本示例：

https://github.com/521dimensions/amplitudejs/blob/dev/examples/blue-playlist/index.html

Answer 2

这是因为HTML的头部分没有从CDN提取javascript。

根据文档，您将需要输入版本号。

这是正确的示例：

对于最新版本，请勿使用任何数字。

例如：

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/amplitudejs/dist/amplitude.js"></script>

对于任何版本，只需将您的电话号码放在@之后

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/amplitudejs@4.1.0/dist/amplitude.js"></script>

现在，您可以使用脚本在html部分下的任何地方调用js函数，最好在结束正文部分之前调用脚本。