Предисловие

В предыдущих статьях я писал о том, как WordPress представляет NetEase Cloud и другую музыку через Hermit. Рекомендуется вводить его напрямую с помощью плагина, ведь это удобно и экономит силы. Подробности читайте в моей предыдущей статье.

​

5 рекомендаций для музыкального проигрывателя блоков WordPress: Hermit на основе APlayer X (поддерживает NetEase Cloud, QQ Music, Xiami и т. д.)

​

позавчера

17910

Метод реализации

Еще пройти здесьAPlayerпредставлено：Его интерфейс прекрасен,Мощный。музыкальный плееринформация о музыке,тексты песен,индикатор выполнения,объем,последовательный режим,Поддерживаются оба режима цикла. Вы можете использовать внешние ссылки на музыку третьих лиц.,Вы также можете использовать свои собственные музыкальные ссылки. Но на этот раз он отключен от плагинов,Непосредственное представление через HTML,По сравнению с методом плагина, это не что иное, как вставка HTML, чтобы использовать его каждый раз.,Однако область применения значительно расширилась.,Если ваш веб-сайт поддерживает HTML, вы можете импортировать его напрямую.

Реализация кода

Вы можете загрузить соответствующие CSS и JS со страницы документации APlayer или напрямую использовать jsdeliver CDN для их импорта. Если ваш сервер внутренний, рекомендуется разместить его непосредственно на локальном сервере. Ведь он быстрее зарубежных серверов, каким бы медленным он ни был. Если позволяют условия, вы можете разместить js и css на CDN. Используются файлы APlayer.min.js и APlayer.min.css, они представлены следующим образом:

Содержимое здесь скрыто,Пожалуйста, обновите страницу после комментария..(https://www.yowap.com/javascript:(scrollTo('#commentform',-120%29%29;)

Просто замените соответствующие CSS и JS на свои.

Описание основных параметров плеера:

Знакомство со сторонней музыкой

Одно введение

Потому что я обычно это вставляю в статью,В целом одно введение, поэтому в первую очередь рекомендуется Одно путь въезда

Код выглядит следующим образом:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
<meting-js server="netease" type="song" id="496869422"></meting-js>

server="netease" указывает музыкальную платформу как NetEase Cloud, type="song" относится к одному типу, а id="496869422" — это идентификатор музыки, который совпадает с идентификатором в ссылке.

Знакомство с плейлистом

Теперь NetEase Cloud создает список воспроизведения, а затем запоминает идентификатор списка воспроизведения. Стиль следующий:

Как указано выше, server="netease" указывает музыкальную платформу NetEase Cloud, type="playlist" относится к типу списка воспроизведения, а id="5185298264" — это идентификатор списка воспроизведения, который совпадает с идентификатором в ссылке. .

Реализация кода：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
<meting-js server="netease" type="playlist" id="5185298264"></meting-js>

введение мини-плеера

Потому что я не размещаю его сбоку от веб-сайта, потому что это влияет на взаимодействие с пользователем, поэтому я обычно не использую мини-стиль.

Реализация кода：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
​
<meting-js 
    server="netease" 
    type="playlist" 
    id="496869422"
    fixed="true" 
    mini="true"
    order="random"
    loop="all"
    preload="auto"
    list-folded="false">
</meting-js>

Знакомство с местной музыкой

Потому что мы иногда размещаем музыкальные ресурсы на сервере,Итак, вот введение в внедрение местных ресурсов.,Метод реализация такая же, как указано выше.

У меня есть чем заняться временно, поэтому сначала выложу это, а об этом расскажу в следующей статье.