Как вставить аудио на сайт?
В прошлый раз в рубрике Знаете ли вы? мы разбирались, как вставить видео в блог. А в этот раз дополним наши знания и выясним, как можно вставить в блог аудиоплеер для прослушивания музыки или подкаста.
Вариантов, как это можно сделать, – десятки. Но прежде, чем вы решите воспользоваться тем или другим способом, обратите внимание на следующие моменты:
1. Сколько хранится загруженный аудиофайл на сервере? Не нужно ли будет его постоянно заливать заново. В принципе, можно разместить файл на своем хостинге и тогда он будет доступен всегда, пока вы сами его не удалите. Но это вопрос использования дискового пространства. Тем более, если аудиофайлов будет много.
2. Насколько сервис надежный. Сколько он уже существует, какое количество пользователей им пользуется, насколько стабильно он работает.
3. Будьте осторожны с плагинами. Есть специальные плагины для вставки аудио в статью. Но я люблю обходиться без них, если это возможно. Чем больше плагинов, тем больше вероятность возникновения проблем.
В рамках этой статьи мы разберем один из вариантов добавления подкаста – тот, который не требует установки дополнительных плагинов и подходит для любой платформы (blogspot, wordpress, и т.д.).
Общая схема следующая: загружаем файл на сервер, получаем код проигрывателя, вставляем код в нужном месте в статье в режиме html. Ничего сложного. 🙂
Вставить аудио на сайт с помощью Podfm.ru: пошаговая инструкция
Для наших целей воспользуемся сервисом Podfm.ru. Он мне нравится своей простотой, доступностью для понимания даже новичку, и русскоязычным интерфейсом (что оценят те, у кого с английским не очень хорошие отношения).
Если вы еще никогда не пользовались этим сервисом, то вам нужно будет пройти несложную регистрацию. Далее заходите в свой аккаунт, находите кнопку “Добавить” в верхнем меню (или в боковой колонке).
Далее выбираете нужный файл с компьютера или из Интернета (указав ссылку на файл). После загрузки файла автоматически откроется форма, куда вам нужно будет внести информацию (дата публикации, название, описание, картинка к файлу, рубрика), а также включить или выключить возможность скачивания. Если вы не разрешаете файл скачивать, то его можно будет только прослушать.
После сохранения всех настроек под файлом появится вот такое окно:
В этом окне нас будет интересовать меню “Разместить плеер”. Жмем на “HTML” и видим ниже код плеера. Копируем его и вставляем в нужном месте в статью в режиме “html”.
Публикуем статью и наслаждаемся красивым и удобным плеером в нашем блоге!
Подводные камешки 🙂
Podfm.ru — это прежде всего сервис для подкастеров. Хранение музыки не приветствуется. Если вы хотите просто вставить музыкальный файл в сообщение, то лучше воспользоваться другим сервисом (например, Яндекс Музыкой).
На Podfm.ru файлы можно загружать только в формате mp3. Т.е. файл из интернета в другом формате не загрузится. А свои файлы на компьютере придется сначала конвертировать в mp3, а потом уж выгружать на podfm.ru.
Кроме того, когда вы копируете код плеера в статью и нажимаете кнопку предпросмотра сообщения, чтобы понять, как это будет выглядеть, то плеер вы можете и не увидеть. Тем не менее, он появляется и работает после публикации статьи. Так что не пугайтесь, все в порядке. 🙂
Что касается упомянутого выше сервиса Яндекс Музыка, то все делается аналогично. Находите нужную вам композицию, по клику на название она начинает воспроизводиться и под названием справа появляются меню «Поделиться» (в соцсетях) и «Встроить в блог». По нажатию на меню «Встроить в блог», получаем код html, который и вставляем в сообщение блога. После публикации сообщения, плеер отображается на странице.
А вы загружаете аудио в блог? Какой сервис для хранения и встраивания аудио считаете лучшим? Поделитесь своим опытом.
Успехов!
Автор: Татьяна Иванко
Иллюстрация: vipof. com
Добавление видео- или аудиофайла на страницу
Важно: Данная статья переведена с помощью машинного перевода, см. Отказ от ответственности. Используйте английский вариант этой статьи, который находится здесь, в качестве справочного материала.
Имеется несколько способов добавления аудио- или видеоклипа на страницу SharePoint при ее редактировании в браузере. Для воспроизведения отдельного аудио- или видеофайла на страницу можно добавить веб-часть «Мультимедиа». Динамический показ видео- и аудиофайлов можно настроить с помощью веб-части «Запрос контента». Кроме того, с помощью кода внедрения можно внедрить на страницу видеофайл со стороннего сайта для обмена видеоматериалами.
В этой статье
-
Добавление мультимедиа веб-части на страницу
-
Настройка веб-часть содержимого запроса для отображения видео
-
Вставка видео на страницу с помощью код внедрения
Добавление на страницу веб-части «Мультимедиа»
С помощью веб-части мультимедиа для воспроизведения аудио- или видеоклипы на странице. Сведения о конкретных видео- и аудиофайлов форматов, поддерживаемых веб-части мультимедиа Поддерживаемые форматы файлов мультимедиа и протоколы в Silverlightсм.
Для выполнения описанной ниже процедуры необходимо разрешение на редактирование страниц.
-
Откройте страницу, которую нужно изменить.
-
На вкладке ленты Страница нажмите кнопку Изменить.
-
Выполните одно из перечисленных ниже действий.
-
-
При редактировании страницы веб-частей щелкните Добавить веб-часть в столбце или зоне, куда требуется внедрить файл мультимедиа. В разделе
-
-
В появившемся мультимедиа веб-части на странице, щелкните текст, в котором указано, щелкните здесь, чтобы настроить.
-
Откройте на ленте вкладку Параметры мультимедиа.
-
Чтобы настроить веб-часть «Мультимедиа» на отображение определенного аудио- или видеофайла, наведите указатель мыши на команду Изменить мультимедиа и выполните одно из перечисленных ниже действий.
-
Чтобы загрузить файл с компьютера, выберите вариант С компьютера, найдите нужный файл и нажмите кнопку ОК.
Чтобы внедрить видеофайл, уже сохраненный на сайте SharePoint, выберите вариант Из SharePoint, перейдите в раздел сайта (например, библиотеку материалов), в котором хранятся видео- и аудиофайлы, выберите нужный файл и нажмите кнопку ОК.
-
Чтобы внедрить видео с видеосайтов, выберите вариант Из Интернета и введите URL-АДРЕС файла, который вы хотите использовать и нажмите кнопку
ОК.Поддерживает воспроизведение файлов из URL-адреса, которые указывают видеофайла мультимедиа веб-части. Например: http://contoso.com/VideoFile.wmv. Если вы используете код внедрения или совместного использования ссылки для страниц, содержащих видео, они не будут работать. Дополнительные сведения о внедрении видео с помощью код внедрения, читайте статью внедрить видео на страницу с помощью код внедрения.
-
-
Выбрав нужный файл, нажмите кнопку ОК.
-
В группе Свойства
-
В группе Стили проигрывателя на ленте наведите указатель мыши на команду Стили и выберите стиль для проигрывателя.
org/ListItem»>
В группе Просмотр наведите указатель мыши на команду Изменить изображение и выберите файл изображения, который будет выводиться при предварительном просмотре аудио- или видеофайла. Если не изменить изображение предварительного просмотра, выводится изображение по умолчанию для файлов этого типа.
К началу страницы
Настройка веб-части «Запрос контента» для показа видео
С помощью веб-части «Запрос контента» можно организовать на странице динамическое воспроизведение видео- и аудиофайлов. Эта веб-часть может пригодиться для добавления на страницу раздела с популярными видеороликами или раздела видео с определенными тегами метаданных.
Веб-часть «Запрос контента», добавленную на страницу, можно настроить для поиска на сайте всех элементов контента, удовлетворяющих определенному условию. Результаты соответствующего запроса выводятся на странице. При добавлении на сайт нового контента, удовлетворяющего условиям запроса, он также появится в этой веб-части.
Для выполнения описанной ниже процедуры необходимо разрешение на редактирование страниц.
В этой процедуре предполагается, что на странице будут отображаться видеофайлы, однако она подходит и для аудиофайлов и файлов изображений.
-
Откройте страницу, которую нужно изменить.
-
На вкладке ленты «Страница» нажмите кнопку Изменить. Выполните одно из указанных ниже действий.
-
При редактировании вики-страницы или страницы публикации щелкните на ней доступное для редактирования место, в которое требуется поместить веб-часть «Запрос контента».
-
При редактировании страницы веб-частей щелкните Добавить веб-часть в столбце или зоне, куда требуется вставить веб-часть «Запрос контента». В разделе Категории щелкните элемент Сведение контента. В разделе Веб-части выберите вариант Запрос контента и нажмите кнопку Добавить.
-
-
В веб-части «Запрос контента» щелкните стрелку и выберите команду Изменить веб-часть.
-
Щелкните ссылку откройте область инструментов.
-
В области инструментов веб-части «Запрос контента» разверните узел Запрос.
-
В разделе Источник укажите местоположение элементов, которые требуется отобразить. Если необходимо, перейдите в нужный раздел соответствующего сайта, дочернего сайта или списка.
-
Если областью действия запроса является сайт, в разделе «Тип списка» укажите тип списка, элементы из которого требуется отобразить. Если в действии 6 был выбран определенный список или библиотека, значение в это поле будет подставлено автоматически.
-
В разделе Тип контента в списке Показать элементы с данным типом контента выберите вариант Типы контента цифровых активов.
-
В разделе Показать элементы с данным типом контента выберите вариант Видео. Если в организации созданы настраиваемые версии типов контента цифровых активов, можно установить флажок Включать дочерние типы контента.
-
Кроме того, в разделе Выбор целевой аудитории можно настроить фильтрацию аудитории. В результате определенные элементы будут отображаться только для некоторой аудитории в зависимости от значений параметров целевой аудитории сайта.
-
В разделе Дополнительные фильтры можно настроить фильтрацию отображаемого контента с помощью метаданных элементов. Например, чтобы отображать видеоматериалы, в тегах которых есть определенное ключевое слово, выберите элемент Корпоративные ключевые слова с оператором содержит хотя бы один из и введите нужные значения.
-
Чтобы добавить другие фильтры, щелкните оператор и или или.
-
Разверните презентацию, сделать все настройки, которые должны в группе Группировка и сортировка, Стили и полей для отображения. В разделе Стили полезно убедитесь в том, что установлен флажок Воспроизвести ссылкам мультимедийных файлов в браузере Если посетители узла должны иметь возможность воспроизводить клипы мультимедиа непосредственно в браузере.
При первоначальной настройке веб-частью запроса содержимого, вы не знаете, как вы хотите настроить элементы в разделе презентации. Это может быть полезным сначала предварительного просмотра запроса в веб-части, а затем измените его еще раз, чтобы сделать настройки внешнего вида сведений.
К примеру, если вы не настроить параметры в разделе презентации, видео может отображаться изображение предварительного просмотра больших, который может не работать с макет страницы. В этом случае вы можете выбрать фиксированным размером изображения в разделе стили | Стиль элемента для предоставления посетителям с небольшой миниатюрные изображения, можно щелкнуть для воспроизведения видео. В следующем примере показана содержимого веб-частью запроса, отображающий три видео. Он был настроен с фиксированным размером изображения.
-
Нажмите кнопку ОК.
-
Сохраните изменения на странице.
Дополнительные сведения о веб-частью запроса содержимого читайте в статье отображения динамическое представление контента на странице путем добавления веб-частью запроса содержимого.
К началу страницы
Внедрение видео на страницу с помощью кода внедрения
Чтобы добавить на страницу видео со стороннего веб-сайта для обмена видеоматериалами с помощью кода внедрения, нужно вставить этот код в веб-часть «Редактор контента».
Для выполнения описанной ниже процедуры необходимы разрешения разработчика.
-
Найдите видео, которое требуется внедрить на страницу, и скопируйте код внедрения.
-
Откройте страницу, которую нужно изменить.
-
На вкладке ленты Страница нажмите кнопку Изменить. Выполните одно из указанных ниже действий.
-
Если вы редактируете вики-страницы, щелкните место на странице, которую вы хотите добавить веб-часть редактора содержимого, откройте вкладку Вставка на ленте Средства редактирования и нажмите кнопку Веб-части. В разделе категории выберите пункт Среда и контент. В разделе Веб-частиРедактора содержимого нажмите кнопку и нажмите кнопку Добавить.
-
При редактировании страницы веб-частей щелкните Добавить веб-часть в столбце или зоне, куда требуется внедрить файл мультимедиа. В разделе Категории щелкните элемент Среда и контент. В разделе Веб-части выберите вариант Редактор контента и нажмите кнопку Добавить.
-
-
В веб-части «Редактор контента» наведите указатель мыши на стрелку и выберите команду Изменить веб-часть.
org/ListItem»>
-
На вкладке Формат текста на ленте Инструменты редактирования, в группе » Разметка » выберите пункт HTML и нажмите кнопку Изменить исходный текст HTML.
-
Вставьте код внедрения в диалоговом окне Исходного текста HTML и нажмите кнопку ОК.
-
Сохраните страницу (либо сохраните и верните ее, если для страниц на сайте используется процедура извлечения).
org/ListItem»>
В веб-части «Редактор контента» введите текст, который будет отображаться на странице в качестве описания видео.
Чтобы воспроизвести видео, нажмите кнопку воспроизведения на встроенном видеопроигрывателе.
К началу страницы
Как встроить бесплатный MP3-плеер на свой веб-сайт: 3 способа
Если вы хотите, чтобы посетители вашего веб-сайта наслаждались файлом MP3, один из самых простых способов сделать это — встроить его на страницу. Благодаря встроенному MP3-плееру посетителям не нужно напрямую загружать аудио или использовать дополнительное программное обеспечение, поскольку оно воспроизводится в режиме реального времени.
Мы подробно расскажем о различных методах, которые вы можете использовать для вставки MP3 на свой веб-сайт, включая использование HTML5 и Google Диска.
1. Вставьте MP3 на свой веб-сайт с помощью HTML5
Если вам удобно редактировать код своего веб-сайта, одним из самых простых способов встраивания файла MP3 является использование HTML5.
Тег HTML5 может показаться простым на первый взгляд, но он эффективен, поскольку совместим со всеми основными настольными и мобильными браузерами.
Чтобы встроить MP3 с HTML5, используйте этот код:
<управление звуком>
Просто замените MP3 URL ЗДЕСЬ загруженным аудиофайлом. Это не может быть файл, хранящийся на вашем компьютере; он должен быть доступен онлайн.
Этот код разместит на странице небольшой аудиоплеер, из которого пользователь сможет воспроизводить, приостанавливать, пролистывать и регулировать громкость. Вот как это выглядит в Firefox:
Этот код также включает сообщение, которое будет отображаться вместо медиаплеера в том маловероятном случае, если браузер пользователя не поддерживает плеер.
Вы можете применить такие атрибуты, как autoplay и loop , например:
<аудио управляет циклом автоматического воспроизведения>
Имейте в виду, что большинство браузеров не поддерживают автовоспроизведение, потому что автоматически навязывать звук пользователям считается плохой практикой.
Базовая настройка может быть применена к блоку аудиоплеера через CSS, например, граница и дополнение . Однако вам потребуется использовать JavaScript для правильного оформления самого проигрывателя, чтобы он был единообразен в разных браузерах.
Дополнительную информацию об атрибутах и настройке аудиоплеера HTML5 можно найти в веб-документах MDN.
Связано: Классные HTML-эффекты, которые любой может добавить на свой веб-сайт
2. Вставьте MP3-файл на свой веб-сайт с помощью Google Диска
Google Диск — отличный бесплатный поставщик облачных хранилищ. Вы можете использовать его для загрузки файла MP3 и создания аудиоплеера.
Когда MP3 загружен на Google Диск:
- Щелкните правой кнопкой мыши файл и выберите Получить ссылку .
- Измените ограничение доступа на Всем, у кого есть ссылка .
- Наконец, нажмите Копировать ссылку .
Это даст вам URL, подобный этому:
https://drive.google.com/file/d/123/view?usp=sharing
Замените view?usp=sharing на предпросмотр , вот так:
https://drive.google.com/file/d/123/preview
Затем используйте тег , чтобы встроить MP3-плеер на свой веб-сайт, заменив DRIVE URL URL-адресом, который вы только что отредактировано:
При необходимости можно настроить, добавить или удалить атрибуты (например, frameborder и width ).
Это позволит встроить MP3 на ваш веб-сайт с помощью проигрывателя Google Диска. Пользователи могут воспроизводить, очищать и регулировать громкость, как и в проигрывателе HTML5. Вот как это выглядит:
Основное отличие — наличие выдвигающейся кнопки . Это открывает MP3 на Google Диске, где пользователи могут добавлять комментарии, делиться файлом и т. д.
3. Вставьте MP3 на свой веб-сайт с помощью CMS
Если вы используете систему управления контентом (CMS) для своего веб-сайта, вы, вероятно, все еще можете использовать описанные выше методы. Тем не менее, вам может быть неудобно редактировать HTML-код.
Любая хорошая CMS позволит вам легко добавить звук на ваш сайт через свой интерфейс. Например, в WordPress вам просто нужно добавить блок , выбрать Аудио , а затем либо Загрузить MP3, выбрать его из медиатеки , либо Вставить из URL-адреса .
Независимо от того, используете ли вы Google Sites, ExpressionEngine или такой сервис, как Squarespace, процесс добавления звука будет немного отличаться, поэтому обязательно ознакомьтесь со справочной документацией компании для получения полных инструкций.
Позвольте вашим посетителям с легкостью слушать MP3
Используя любой из вышеперечисленных методов, посетители вашего веб-сайта теперь смогут с легкостью слушать файлы MP3 через медиаплеер.
Тем не менее, вам не всегда нужно использовать файлы MP3. Существует множество других распространенных аудиоформатов, таких как WAV и FLAC, которые вы также можете воспроизводить прямо на своем веб-сайте.
Как добавить аудиоклипы на свой веб-сайт
Важно предоставить посетителям нашего веб-сайта несколько способов переварить наш контент. Блоги без стиля, которые не предоставляют несколько способов переваривания их контента, закончились. Сегодня Лори Баллен покажет вам, как добавить аудиоклипы на свой веб-сайт, чтобы дать вашим читателям еще один способ переварить ваш контент.
Запланируйте консультацию с Ballen BrandsЭтот пост содержит несколько партнерских ссылок для вашего удобства. Нажмите здесь, чтобы прочитать мою полную политику раскрытия информации.
Зачем включать звук?
Когда посетители приходят на ваш сайт, важно предоставить им несколько способов переварить ваш контент. Дни долгого бега по блогам без стиля или способности переваривать закончились. Теперь вам нужно добавить видео, аудио и слайд-шоу.
При большом количестве используемых мобильных устройств важно предоставлять информацию, которая будет быстрой и легкой для восприятия!
Аудиофайлы можно использовать по-разному; прикреплены в виде загружаемых PDF-файлов, подкастов или руководств. Сегодня я хочу показать вам, как вы можете улучшить свой веб-сайт или блог с помощью аудио!
Наверх
Как преобразовать видео в аудио
Когда вы создаете видео, вы можете превратить это видео в аудио и добавить его в свой блог в качестве аудиоплеера.
В этом примере я буду использовать Soundcloud. Сначала зайдите в Soundcloud и настройте свою учетную запись, если вы еще этого не сделали. Затем нажмите кнопку «Загрузить» в верхней части страницы и выберите видеофайл, из которого вы хотите сделать аудио.
После того, как вы выберете и откроете видеофайл, Soundcloud преобразует его для нас в аудиофайл.
Далее вы собираетесь изменить название видео и изменить слаг — это текст, который идет после URL-адреса, и здесь он находится непосредственно под пространством «Заголовок».
После того, как вы измените ярлык, перейдите в раскрывающееся меню «Жанр» и выберите жанр вашего аудиофайла. Пользователи будут часто заходить в Soundcloud и искать аудио по жанру, как если бы они это делали для подкаста.
Выбор соответствующего жанра — еще один отличный способ оптимизировать звук. Оптимизация жизненно важна на каждом уровне и будет продолжать направлять людей к вашему контенту. Вы также можете использовать дополнительные теги, используя ключевые слова о вашем аудио, чтобы еще больше оптимизировать ваше видео.
Далее вы можете добавить описание к своему аудио для чтения пользователями. Затем выберите, хотите ли вы, чтобы это было общедоступным, частным или запланированным, и, наконец, нажмите «Сохранить».
Да. Это действительно так просто.
После сохранения вы можете поделиться им на Facebook, Twitter, Tumblr или скопировать и вставить URL-адрес в свой блог или на веб-сайт.
Перейти к началу
Настройка и публикация в Soundcloud
Сначала вернитесь в раздел «Ваши треки», и вы увидите аудио, преобразованное из загруженного вами видео.
Справа от аудио вы можете навести курсор на три точки и увидеть различные варианты; поделиться, добавить в следующий, добавить в плейлист и станцию.
Нажмите «Поделиться», и как только мы это сделаем, у нас появятся параметры, которые мы действительно ищем.
Как видите, на этой странице у нас есть код для встраивания WordPress, который вы захотите использовать для своего сайта WordPress.
Самое классное здесь то, что вы можете выбрать цвета, которые соответствуют вашему веб-сайту, чтобы ваша тема была последовательной во всем. Посмотрите мое видео здесь, где я покажу вам, как создать свою цветовую палитру с помощью Canva!
Вы можете зайти в Canva и взять цвет своего бренда прямо с доски объявлений или выбрать что-то, что вам известно, если это один из ваших цветов.
Пока мы находимся на этой странице, мы также можем выбрать, хотим ли мы, чтобы этот аудиофайл воспроизводился автоматически.
Я рекомендую не запускать аудиофайл автоматически на вашем веб-сайте, если только пользователь не знает, что он переходит на веб-сайт со звуковым файлом. Lori Ballen
Перейти к началу
Добавление вашего аудиофайла в WordPress
Когда у меня есть сообщение в блоге, если это применимо, я предпочитаю включать видео прямо вверху сообщения. Это увеличит время ожидания и повысит ценность для потребителя. В этом случае я также хочу включить звук, чтобы мы могли дать пользователю возможность взаимодействовать с контентом.
Скопируйте код вставки WordPress из Soundcloud и нажмите «Редактировать сообщение» на странице блога WordPress. Убедитесь, что вы скопировали его в раздел с пометкой «Текст», который покажет вам весь код. Не вставляйте код для встраивания в раздел с пометкой «Визуальные».
Я думаю, что было бы неплохо встроить аудиофайл под видео, что позволит вашему пользователю либо смотреть видео, либо слушать аудио, либо просто читать блог.
Чтобы сделать еще один шаг вперед, вы также можете создать и вставить ключевую заметку или SlideShare, чтобы они могли просматривать презентацию с изображениями.
Итак, как только вы встроили этот аудиофайл, нажмите «Обновить». Оттуда вы можете просмотреть свой веб-сайт и внести любые изменения в формат на исходной странице SoundCloud, где вы выбрали свою цветовую палитру.
Это действительно так просто — и именно к этому вы хотите пойти со своим блогом и предоставить своим потребителям несколько способов переварить ваш контент. Это также привлечет больше посетителей на ваш сайт, потому что они смогут найти ваше аудио или видео в отдельном месте, а затем перейти в ваш блог.
Многоканальный маркетинг выгоден всем! Лори Баллен
Наверх
Похожие сообщения
Опубликовано: 12 мая 2023 г.
Keap — это гораздо больше, чем просто CRM. В нем есть множество функций и возможностей, о которых даже давние пользователи могут не знать.