Как добавить аудио на бесплатный сайт Weebly?

Weebly предлагает очень простой аудиоплеер как часть профессионального пакета Weebly. На самом деле это аудиоплеер HTML5, который можно легко добавить с помощью нескольких строк кода, и определенно нет необходимости в обновлении, если вам нужен только этот аудиоплеер. Для бесплатных пользователей Weebly существует множество способов добавить аудио на свой сайт. В этой статье мы обсудим следующие методы добавления звука на сайт Weebly.

  1. Вставьте аудио с помощью аудиоэлемента HTML5.
  2. Добавьте собственный аудиоплеер со списком воспроизведения с помощью элемента встроенного кода.
  3. Встраивайте аудиоплеер со сторонних сайтов, таких как SoundCloud.
  4. Добавление фоновой музыки путем изменения CSS / HTML сайта.
  5. Используйте премиум-элемент аудиоплеера Weebly.

1. Добавление аудиоплеера HTML5

Загрузите аудиофайл на свой сайт Weebly и добавьте приведенный ниже код в «Код для вставки» элемент на странице, куда вы хотите добавить аудио. Замените URL-адрес файла URL-адресом вашего аудиофайла Weebly.

<audio src="https://img.webnots.com/2015/07/suture_self.mp3" controls>
</audio>

Плеер будет похож на профессиональный аудиоплеер Weebly, как показано ниже:

Если вы хотите автоматически воспроизводить звук при загрузке страницы, просто добавьте «Автовоспроизведение» атрибут, как показано ниже:

<audio src="https://img.webnots.com/2015/07/suture_self.mp3" controls autoplay>
</audio>

2. Добавление собственного аудиоплеера

Ниже приведен настраиваемый аудиоплеер для вашего сайта Weebly без необходимости обновления до Weebly Pro.

Загрузите Файл JavaScript аудиоплеера Weebly и вставьте содержимое в «Код нижнего колонтитула» раздел вашей страницы. Затем вставьте приведенный ниже код CSS в «Код заголовка» раздел:

<style>
#playlist,audio{background:#666;width:400px;padding:20px;}
.active a{color:#5DB0E6;text-decoration:none;}
</style>

Последний шаг — встроить приведенный ниже HTML-код на страницу с помощью «Код для вставки”Элемент:

<div>
<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
<source type="audio/mp3" src="https://img.webnots.com/2015/07/suture_self.mp3">
Sorry, your browser does not support HTML5 audio.
</audio>
<ul id="playlist">
<li class="active" style="background: #f5f5f5"><a href="https://img.webnots.com/2015/07/suture_self.mp3">Sample Music 1</a></li>
<li style="background: #f5f5f5"><a href="https://img.webnots.com/2015/07/suture_self.mp3">Sample Music 2</a></li>
<li style="background: #f5f5f5"><a href="https://img.webnots.com/2015/07/suture_self.mp3">Sample Music 3</a></li>
<li style="background: #f5f5f5"><a href="https://img.webnots.com/2015/07/suture_self.mp3">Sample Music 4</a></li>
</ul></div>

3. Встраивание аудиокода

Перейдите к любому из поставщиков бесплатных аудиоплееров, например SoundCloud. Нажмите кнопку «Поделиться», скопируйте виджет или вставьте код и вставьте его на свой сайт Weebly, используя элемент «Код вставки» (пользовательский HTML). Вы можете создать свой собственный список воспроизведения и использовать его на своем сайте Weebly. Ниже приведен пример аудиоплеера, загруженного со списком воспроизведения из SoundCloud. Плеер будет автоматически обновляться всякий раз, когда вы обновляете плейлист в SoundCloud.

4. Добавление фоновой музыки в Weebly

Если вы не хотите использовать внешний исходный код, вы можете добавить фоновую музыку на свой бесплатный сайт Weebly, выполнив следующие два шага. Таким образом, вы не увидите аудиоплеер на своем сайте, но музыка будет загружаться автоматически, когда посетитель откроет вашу страницу.

Шаг 1:

  • В редакторе Weebly перейдите на вкладку «Тема».
  • Нажмите кнопку «Редактировать HTML / CSS».
  • В разделе «Активы» нажмите «Загрузить файлы» и загрузите свой аудиофайл .mp3.

Щелкните правой кнопкой мыши файл и скопируйте URL-адрес mp3-файла.

Шаг 2:

  • Если вы хотите добавить музыку на определенную страницу, щелкните вкладку «Страницы» и выберите страницу. Перейдите в раздел «Настройки SEO> Код заголовка» и добавьте следующий код.
<embed src="https://www.webnots.com/how-to-add-audio-in-free-weebly-site/File path from Step1" auto loop="true" hidden="true">
  • Если вы хотите добавить фоновую музыку на весь свой сайт, вставьте тот же код в «Настройки> SEO> Код заголовка».
Добавить код в раздел кода заголовка Weebly

Добавить код в раздел кода заголовка Weebly

5. Элемент аудиоплеера Weebly Premium

Weebly предлагает элемент аудиоплеера, начиная с профессионального плана. Аудиоплеер по умолчанию — это простой инструмент для загрузки одного аудиофайла на вашу страницу. К сожалению, это не всеобъемлющая функция, которую можно использовать на музыкальных сайтах, и бесплатные опции, описанные выше, могут быть для вас лучшим вариантом.

Преимущество элемента аудиоплеера Weebly в том, что он не имеет торговой марки.

Плюсы и минусы

Плюсы Минусы
Безымянный Можно загрузить только один файл, и функция списка воспроизведения недоступна
Вы можете добавить простую фоновую музыку с помощью элемента аудиоплеера Поддерживает только формат MP3
Простой и занимающий меньше места Фиксированный размер и нет возможности изменить размер на другой
Воспроизвести аудио на странице без публикации Доступны только два варианта цвета
Аудиоплеер Weebly

Аудиоплеер Weebly

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

  • Загрузка и согласование
  • Информация о треке — добавьте название трека и имя исполнителя.
  • Дополнительно — выберите скин и автоматическое воспроизведение

В дополнение к указанным выше параметрам у вас есть кнопка воспроизведения / паузы, панель поиска и кнопка громкости в плеере.

Параметры аудиоплеера Weebly

Параметры аудиоплеера Weebly

По умолчанию нет возможности изменить ширину аудиоплеера Weebly. Но вы можете использовать элементы «Spacer» рядом с аудиоплеером, чтобы отрегулировать ширину.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *