Если вам нужен быстрый и простой способ добавить музыку на свой веб-сайт, использование HTML-кодирования — это один из способов сделать это, если вы знаете об ограничениях. Поскольку все браузеры не распознают одни и те же аудиоформаты, а старые браузеры не распознают усовершенствования HTML5, вам нужно знать, как решить эти проблемы с браузером, чтобы достичь своей цели.
Использование HTML-кода для добавления музыки через текстовый редактор
Если вы кодируете свой веб-сайт длинным путем и используете текстовый редактор , такой как Блокнот, вам потребуется знать больше кода, чем если бы вы использовали HTML-редакторы , такие как Dreamweaver. Предполагая, что у вас уже есть базовые знания HTML-кода , вы можете предпринять следующие шаги, чтобы легко добавить музыку на любую страницу своего веб-сайта:
-
Во-первых, решите, хотите ли вы, чтобы музыка воспроизводилась при загрузке веб-страницы или только тогда, когда посетитель нажимает на ссылку.
-
Для работы с большинством браузеров и соответствия стандартам HTML5 вам необходимо создать два аудиофайла: .mp3 и .ogg. Версия mp3 распознается почти всеми браузерами, тогда как версия .ogg предназначена для более старых версий Firefox и Opera.
-
Загрузите музыкальные файлы на свой сервер через программу, например FileZilla, или через панель управления вашего сайта. В большинстве панелей управления есть функция «Диспетчер файлов», которая позволяет загружать файлы, извлекать заархивированные папки и даже редактировать файлы. Это хорошая идея, чтобы иметь определенную папку, в которой вы храните музыкальные файлы. Вы можете просто назвать это «музыка» или «аудио», если хотите.
-
После того, как вы загрузили музыку, вы готовы работать с HTML-кодом.
Как встроить музыку
Есть несколько различных методов, которые вы можете использовать для встраивания музыки, в зависимости от того, решили ли вы запускать музыку при загрузке страницы, запускать, если пользователь инициирует ее, или запускать только тогда, когда посетитель щелкает ссылку.
Базовый код (не HTML5)
Эти методы использовались до появления тега <audio> в HTML5. Если ваша страница не совместима с HTML5, вы можете использовать эти параметры.
- Метод <embed> : этот тег HTML используется для элемента, отличного от HTML. Использование этого кода позволит воспроизвести музыкальный файл при загрузке страницы. Тег размещается внутри тега <body> HTML-кода вашей страницы.
- <embed height=»50″ width=»100″ src=»YourMusicFile.mp3″>
- Метод <object> : этот HTML-тег также можно использовать в качестве контейнера для не-HTML-элемента. Использование этого кода позволяет воспроизвести музыкальный файл при загрузке страницы. Как и тег <embed>, этот размещается внутри HTML-кода вашей страницы.
- <object height=»50″ width=»100″ data=»YourMusicFile.mp3″></object>
Одна потенциальная проблема с использованием любого из этих тегов заключается в том, что музыка может не воспроизводиться в определенных ситуациях, поскольку разные браузеры поддерживают разные аудиоформаты. Например, если браузер пользователя не поддерживает файл, такой как файл mp3, для работы музыки требуется подключаемый модуль. Если этот подключаемый модуль не установлен на компьютере пользователя, звук воспроизводиться не будет.
Тег HTML5 <аудио>
Тег <audio> появился в HTML5 и определяет музыку или другие аудиофайлы. Использование этого тега внутри вашего HTML выглядит так:
<управление звуком>
<source src=»YourMusicFile.mp3″ type=»audio/mpeg»>
<source src=»YourMusicFile.ogg» type=»audio/ogg»>
<p>Ваш браузер не поддерживает этот аудиоформат.</p>
</аудио>
Вам необходимо включить оба формата файлов, чтобы приспособиться к большему спектру браузеров. Тег <audio> распознается и работает во всех современных браузерах. Однако, поскольку старые браузеры не распознают тег <audio>, пользователь увидит в этих браузерах сообщение «Ваш браузер не поддерживает этот аудиоформат».
Смешайте старое с новым
Благодаря совместному использованию тегов <audio> и <embed> ваша музыка будет воспроизводиться в самых разных браузерах. Включив файлы .mp3 и .ogg, вы должны охватить львиную долю пользователей. Единственным недостатком этого метода является то, что тег <embed> не «деградирует», поэтому сообщение об ошибке, например «Ваш браузер не поддерживает этот аудиоформат», не будет отображаться в окне браузера.
<управление звуком>
<source src=» YourMusicFile.mp3″ type=»audio/mpeg»>
<source src=» YourMusicFile.ogg» type=»audio/ogg»>
<embed height=»50″ width=»100″ src=»YourMusicFile.mp3″>
</аудио>
Параметры внутри тега <audio>
Вы контролируете, когда музыка активируется, добавляя или опуская один или несколько атрибутов.
- Воспроизведение при загрузке: если вы хотите, чтобы музыка воспроизводилась при загрузке страницы, добавьте атрибут autoplay .
<аудиоуправление автозапуском>
<source src=» YourMusicFile.mp3″ type=»audio/mpeg»>
<source src=» YourMusicFile.ogg» type=»audio/ogg»>
<embed height=»50″ width=»100″ src=»YourMusicFile.mp3″>
</аудио>
- Кнопки воспроизведения/остановки/паузы : для отображения кнопок управления включите элементы управления атрибутами .
- Endless Loop : если вы хотите, чтобы музыка зацикливалась бесконечно, включите атрибут loop .
- Без звука : чтобы заставить пользователя включить звук, чтобы услышать его, включите атрибут muted.
Отображение музыкальных нот на вашей странице
Бывают случаи, когда отображение музыкальных нот на вашей странице является очень хорошей идеей. Например, если вы обучаете игре на гитаре, на вашей странице может быть видео, демонстрирующее, как играть пальцами по нотам, а также «ноты», которые учат посетителей читать ноты. Существует несколько способов отображения музыкальных нот в HTML, и вот три из них.
Используйте HTML-код для заметки
Создать изображение из шрифта
Используйте шрифт, который включает музыкальные ноты, или шрифт, который фокусируется исключительно на нотах для его символов.
Используйте программу
Программы-компиляторы, такие как VexFlow, выполняют всю тяжелую работу, позволяя вам писать заметки в буквенном формате (a, b, c и т. д.), а затем программа компилирует вашу работу и выводит файл изображения, который вы можете отобразить на своей веб-странице. . Lilypond — еще один программный вариант.
Лучшие практики
Музыкальные вкусы очень индивидуальны, поэтому то, что, по вашему мнению, звучит великолепно, может показаться кому-то болезненным. Поскольку музыкальные вкусы очень субъективны, обычно лучше дать пользователю как можно больше контроля над музыкой. Таким образом, даже несмотря на то, что у вас есть возможность запускать музыку при загрузке страницы или бесконечно зацикливать звук, предоставление пользователям элементов управления для самостоятельного выполнения этих действий может удерживать их на странице дольше, особенно если музыка является фоновой, которая почти ничего не добавляет. , к содержанию. Размещение музыки на странице должно быть направлено на улучшение пользовательского опыта.