Jak osadzić darmowy odtwarzacz MP3 na swojej stronie internetowej: 3 sposoby

Jak osadzić darmowy odtwarzacz MP3 na swojej stronie internetowej: 3 sposoby

Jeśli chcesz, aby odwiedzający Twoją witrynę mogli cieszyć się plikiem MP3, jednym z najprostszych sposobów na to jest osadzenie go na stronie. Dzięki wbudowanemu odtwarzaczowi MP3 odwiedzający nie muszą bezpośrednio pobierać dźwięku ani korzystać z dodatkowego oprogramowania, ponieważ odtwarza on w trybie inline.





Omówimy różne metody, których możesz użyć do umieszczenia pliku MP3 w swojej witrynie, w tym korzystanie z HTML5 i Dysku Google.





1. Umieść plik MP3 na swojej stronie internetowej za pomocą HTML5

Jeśli nie masz nic przeciwko edytowaniu kodu swojej witryny, jednym z najprostszych sposobów osadzenia pliku MP3 jest użycie HTML5.





HTML5 tag może wydawać się prosty na pierwszy rzut oka, ale jest potężny, ponieważ jest zgodny ze wszystkimi głównymi przeglądarkami komputerowymi i mobilnymi.

Aby osadzić plik MP3 w HTML5, użyj tego kodu:



Your browser does not support the audio tag.

Po prostu wymień URL MP3 TUTAJ z przesłanym plikiem audio. To nie może być plik przechowywany na twoim komputerze; musi być dostępny online.

wifi nie ma prawidłowej konfiguracji IP 2018

Ten kod umieści na stronie mały odtwarzacz audio, z którego użytkownik może odtwarzać, wstrzymywać, przewijać i regulować głośność. Oto jak to wygląda w Firefoksie:





Ten kod zawiera również komunikat, który będzie wyświetlany zamiast odtwarzacza multimedialnego w mało prawdopodobnym przypadku, gdy przeglądarka użytkownika nie obsługuje odtwarzacza.

Możesz zastosować atrybuty takie jak Automatyczne odtwarzanie oraz pętla , jak tak:





Your browser does not support the audio tag.

Pamiętaj, że większość przeglądarek nie obsługuje autoodtwarzania, ponieważ automatyczne wymuszanie dźwięku na użytkownikach jest uważane za złą praktykę.

Podstawowe dostosowanie można zastosować do bloku odtwarzacza audio za pomocą CSS, na przykład granica oraz wyściółka . Będziesz jednak musiał użyć JavaScript, aby odpowiednio wystylizować sam odtwarzacz, tak aby był spójny we wszystkich przeglądarkach.

Więcej informacji na temat atrybutów odtwarzacza audio HTML5 i dostosowywania można znaleźć na Dokumentacja internetowa MDN .

jak naprawić powolne uruchamianie systemu Windows 10

Związane z: Fajne efekty HTML, które każdy może dodać do swoich stron internetowych

2. Umieść plik MP3 na swojej stronie internetowej za pomocą Dysku Google

Dysk Google to doskonały i darmowy dostawca usług przechowywania w chmurze . Możesz go użyć do przesłania pliku MP3 i stworzenia odtwarzacza audio.

Po przesłaniu MP3 na Dysk Google:

  1. Kliknij prawym przyciskiem myszy plik i kliknij Uzyskać link .
  2. Zmień ograniczenie dostępności na Każdy, kto ma link .
  3. Na koniec kliknij Skopiuj link .

Otrzymasz adres URL podobny do tego:

https://drive.google.com/file/d/123/view?usp=sharing

Zastępować widok?usp=udostępnianie z zapowiedź , jak tak:

https://drive.google.com/file/d/123/preview

Następnie użyj an

Możesz dostosować, dodać lub usunąć atrybuty (np. Brzeg ramki oraz szerokość ) jako niezbędne.

Spowoduje to osadzenie MP3 w Twojej witrynie za pomocą odtwarzacza Dysku Google. Użytkownicy mogą grać, szorować i regulować głośność, tak jak w odtwarzaczu HTML5. Oto jak to wygląda:

Główną różnicą jest obecność wyskoczyć przycisk. Spowoduje to otwarcie pliku MP3 na Dysku Google, w którym użytkownicy mogą dodawać komentarze, udostępniać plik i nie tylko.

3. Umieść plik MP3 na swojej stronie internetowej za pomocą CMS

Jeśli korzystasz z systemu zarządzania treścią (CMS) w swojej witrynie , prawdopodobnie nadal możesz korzystać z powyższych metod. To powiedziawszy, możesz nie czuć się komfortowo podczas edytowania kodu HTML.

komputer nie rozpoznaje telefonu po podłączeniu

Każdy dobry CMS pozwoli Ci łatwo dodać dźwięk do Twojej witryny za pośrednictwem interfejsu. Na przykład na WordPressie wystarczy dodaj blok , Wybierz Audio , a potem albo Wgrywać MP3, wybierz go ze swojego Biblioteka mediów , lub Wstaw z adresu URL .

Niezależnie od tego, czy korzystasz z Witryn Google, ExpressionEngine, czy usługi takiej jak Squarespace, proces dodawania dźwięku będzie nieco inny, więc zapoznaj się z dokumentacją pomocy firmy, aby uzyskać pełne wskazówki.

Pozwól odwiedzającym słuchać MP3 z łatwością

Korzystając z dowolnej z powyższych metod, odwiedzający Twoją witrynę będą mogli teraz z łatwością słuchać plików MP3 za pomocą odtwarzacza multimedialnego.

To powiedziawszy, nie zawsze musisz używać plików MP3. Istnieje wiele innych popularnych formatów audio, takich jak WAV i FLAC, które możesz odtwarzać w trybie inline na swojej stronie internetowej.

Udział Udział Ćwierkać E-mail 10 najpopularniejszych formatów audio: którego należy użyć?

Wiesz o MP3, ale co z AAC, FLAC, OGG lub WMA? Dlaczego istnieje tak wiele formatów plików audio i czy istnieje najlepszy format audio?

Czytaj dalej
Powiązane tematy
  • Internet
  • Tworzenie stron internetowych
  • Narzędzia dla webmasterów
  • HTML5
O autorze Joe Keeley(652 opublikowane artykuły)

Joe urodził się z klawiaturą w rękach i od razu zaczął pisać o technologii. Ma tytuł licencjata (z wyróżnieniem) w biznesie, a teraz jest pełnoetatowym niezależnym pisarzem, który lubi upraszczać technologię dla wszystkich.

Więcej od Joe Keeleya

Zapisz się do naszego newslettera

Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

Kliknij tutaj, aby zasubskrybować