Как да вградим песен в Tumblr с бутон за възпроизвеждане на фона

Tumblr позволява на потребителите да изразяват своя стил, включително чрез музика и звукови клипове. За да вградите аудио плейър в блога си, поставете кода в полето "Description" на страницата за персонализиране. Това поле поддържа HTML, CSS и други уеб технологии и обикновено се намира в страничната лента на темите. Аудио файловете трябва да се хостват на външен сървър – Tumblr не предлага хостинг за медийни файлове.

HTML аудио елемент

За прост аудио плейър можете да използвате HTML5 <audio> елемента. Той поддържа формати като MP3, WAV и OGG. За да се покажат бутоните за възпроизвеждане, добавете атрибута controls. Ако искате автоматично пускане, използвайте autoplay, но бъдете предпазливи – повечето потребители не харесват автоматичното възпроизвеждане. Чрез CSS можете да промените външния вид, например да зададете ширина от 45 px, за да се вижда само бутонът за плей.

Самостоятелни аудио плейъри

Ако търсите повече възможности за персонализация, можете да използвате външни плейъри, предназначени за уеб сайтове. Те изискват място за съхранение на файловете им. Пример е WordPress Audio Player – можете да хоствате файловете на собствен сървър и да вградите кода в описанието на Tumblr. За повече сложни конфигурации (например списъци с песни) се налага ръчно кодиране. Друг вариант е Dewplayer, базиран на Flash, който предлага няколко готови стила и генерира персонализиран код според вашите настройки.

Музикални и аудио услуги

Ако не искате да се занимавате с качване на файлове и писане на код, използвайте услуги за споделяне на музика. Spotify предлага вграден плейър, който можете да добавите към вашия блог, включително за плейлисти. SoundCloud също позволява качване на ваши записи и вграждане на плейъра в полето "Description", като поддържа "sets" – еквивалент на плейлистите.

Достъпност и други съображения

Автоматичното възпроизвеждане на музика може да създаде нежелана атмосфера и да отблъсне посетителите – много хора затварят страницата, преди дори да се зареди. Това също така влошава достъпността за хора със зрителни увреждания и увеличава времето за зареждане на сайта, което често води до по-голям процент откази.