Hur man infogar ett ljudspår i html. Vi sparar ljud från Internet till filer. Hur man ställer in bakgrundsmusik i html

Hej alla. Det här är Andrey.

I det här avsnittet kommer vi att lära oss hur man ansluter ljud till HTML sida, dvs. ljudfiler för din webbplats.

Det finns 3 inbäddningsmetoder ljudfiler.

Genom att klicka på denna länk startas automatiskt ett standardprogram för uppspelning av filer av angivet format, vanligtvis detta Windows Media(spelar AIFF, AU, MIDI, WAV och MP3-filer). Det här alternativet är bekant för dig, så låt oss gå vidare.

Andra sättet är att använda en behållare .

Denna behållare låter dig lyssna med hjälp av uppspelningsverktyg som visas direkt på webbsidan, men kontrollpanelen för uppspelning kan se annorlunda ut i olika webbläsare.

För att den här behållaren ska visas måste en speciell plugin installeras i webbläsaren. I Internet Explorer det är standard, men som för andra webbläsare kanske inte alla har det. Då måste du installera den.

XHTML

Parametern src krävs och anger namnet på filen som spelas. Andra parametrar kanske inte anges. Deras lista finns nedan.

BREDD=n— definierar konsolens bredd i pixlar.

HÖJD=m— definierar konsolens höjd i pixlar.

AUTOSTART=TRUE|FALSE— om TRUE startar uppspelningen automatiskt.

AUTOLOAD=TRUE|FALSE- om det har värde FALSE, laddas inte ned filen automatiskt.

STARTTIME="mm:ss"— uppspelningen startar från det ögonblick som anges i minuter och sekunder från början av filen.

REPEAT= SANT / FALSK— tillåter eller förbjuder upprepning av ett ljud-/videoklipp.

PLAY LOOP=Z— om du angav REPEAT-TRUE, ange antalet repetitioner här istället för Z.

VOLYM=procent— uppspelningsvolym, angiven i procent av max.

ALIGN="värde"— justerar kontrollkonsolen i förhållande till sidtexten. Kan ha värdena CENTER, BASELINE TOP VÄNSTER, HÖGER.

CONTROLS="värde"— anger en uppsättning konsolkontroller. Kan ha följande värden (förklaras nedan) - CONSOLE, SMALLCONSOLE, PLAYKNAPP PAUSKNAPP, STOPPKNAPP OCH VOLYMPEL.

TRÖSTA— en fullständig uppsättning kontroller.

SMALLCONSOLE— kompakt representation av konsolen. Full uppsättning kontroller förutom pausknapp.

PLAYKNAPP- Endast uppspelningsknapp.

PAUSKNAPP- endast pausknapp.

STOPPKNAPP- endast en stoppknapp. Filen laddas sedan ner.

VOLYMELVER- Endast volymkontroll.

Vi räknade ut parametrarna.

Jag föreslår att du provar att tillämpa olika parametrar själv och se hur de fungerar (det är inget komplicerat här).

Tredje Sättet är att ange en ljudfil som bakgrundsljud för sidan.

Syntaxen här är enkel:

src=filnamn- ljudfil

loopa=n- antal repetitioner (oändligt - kontinuerligt)

volym- volym (från 10 000 till 0,0 - standardvärde)

balans- balans mellan vänster och höger högtalare, värdet kan variera från -10000 (maximalt för vänster kanal) till 10000 (maximalt för höger kanal).

Vi har redan pratat om användningen av HTML5 och varför det är relevant idag. Låt oss nu titta närmare på frågan "Hur infogar man ljud på en webbplats med HTML5."

Du kan lägga till musik på webbplatsen med taggen audio. Ett exempel på den enklaste implementeringen av denna tagg:

Men återigen, som med video, är det inte så enkelt. Alla webbläsare stöder inte de nödvändiga ljudkodekarna. Låt oss titta på tabellen:

WebbläsareGoogle ChromeMozilla FirefoxSafariOperaInternet Explorer
mp3 Äta Nej Äta Nej Äta
wav Äta Äta Äta Äta Nej
A.A.C. Äta Nej Äta Nej Äta
ogg/vorbis Äta Äta Nej Äta Nej

Som framgår av tabellen är det mest "universella" formatet .wav. Internet Explorer stöder det dock inte. Därför rekommenderas det att konvertera ljudfilen till flera format och använda flera ljudkodekar. Följande exempel illustrerar ett sätt att lägga till HTML-ljud på en webbsida:

Utseendet på ljudspelaren beror på webbläsaren, här är till exempel hur ljudspelaren ser ut i webbläsaren Firefox:

AUDIO-taggattribut

Till huvudtaggattributen audio relatera:

  • src- sökväg till ljudfilen (kan anges separat med en inbäddad tagg källa);
  • kontroller- ljudkontrollpanelen visas (uppspelning, paus, volym, etc.);
  • autospela- spelar upp ljudfilen direkt efter att webbsidan laddats;
  • slinga- cyklisk uppspelning;

Kapslad tagg källa kan ha följande attribut:

  • src- sökväg till ljudfilen;
  • typ- typ av ljudkälla;
  • media- typ av enhet på vilken ljudfilen kommer att spelas (alla - på alla enheter, tv - tv, etc.);

Varför behöver du musik på sajten?

En ganska intressant fråga: att spela musik eller röstfiler på en webbplats, eller en inbyggd spelare hjälper webbplatsbesökarna att slappna av, väcker positiva känslor och sätter dem i rätt stämning, så att säga, gör det lättare att interagera med webbplatsen. Men dessa effekter fungerar bara om musiken på webbplatsen är vald korrekt och ljudvolymen inte överstiger acceptabla gränser, annars kommer alla dina ansträngningar att vara förgäves och kommer att orsaka negativa känslor bland webbplatsbesökare.

Hur infogar man ljud (musik) på en webbplats i html?

Vi får ofta den här frågan, musik på en webbplats är ett relevant och kreativt element, och det finns många sätt att spela det på och de är inte så svåra att implementera. Låt oss börja med det faktum att varje användare av det globala nätverket använder någon form av webbläsare för att komma åt Internet, och det finns ingen allmän och universell teknik för att spela ljud- och musikfiler, varje webbläsare fungerar enligt sina egna algoritmer och de är något olika från varandra, så när man spelar musik med Genom att bädda in den i HTML-koden på en sida kan problem uppstå. Men som ni vet går alla problem att lösa!

Infoga musik i en webbplats HTML, JavaScript, jQuery, AJAX sätt:

1 sätt.

Skapa en ljudmusikspelare på en webbplats eller spelare

Tekniken är enkel, en spelarfil skapas så att den inte laddar webbplatsen eller servern; vi väljer den teknik som vi kommer att använda: JavaScript, jQuery, AJAX. Baserat på den valda tekniken utvecklar vi ett script för vår sajt och infogar det på sajten. Skriptet skapas beroende på vad du behöver: automatisk uppspelning av bakgrundsmusik på sajten eller en spelare som kontrolleras av besökaren. Skapa sedan en mapp i roten på webbplatsen för musik och ladda upp ljudfiler till den.

Eller, som en alternativ metod, kan du skapa en spelare med Flash-teknik; en sådan spelare kommer att se mer imponerande ut. Sanningen kommer att bli dyrare och svårare för webbplatsen (det kommer att öka laddningstiden för webbplatssidorna).

Metod 2.

Installera musik på en webbplats med HTML

Genom att använda funktionerna i HTML och webbläsaren kan du infoga en spelare eller bakgrundsmusik på webbplatsen. Tekniken är lika enkel: HTML5-kod skapas med "audio"-taggen och denna kod skrivs in i sajten, och när användaren besöker sajten ser han en minimerad spelare, besökaren trycker på play-knappen eller bakgrundsmusik automatiskt börjar spela. Utseendet på spelaren kommer att bero på webbläsaren som besökaren kom från, men funktionaliteten kommer att förbli standard: Spela, Stopp, Nästa, Föregående, Volymknappar. Spelaren med HTML-kod ser ut så här:

Själva inbäddningskoden ser ut så här:

Som du kanske har märkt, möjliggör kommandot "kontroller autouppspelning" automatisk uppspelning av musik så snart en besökare kommer in på webbplatsen.

En alternativ version av HTML-koden är "bgsound"-taggen, denna använder inte en visuell spelare alls; när du besöker sidan kommer musik på sidan att börja spelas, men du kan justera volymen, pausa osv. användaren kommer inte att kunna. Volyminställningen för uppspelning av ljudfiler konfigureras i själva koden.

Ljudfilformat för att spela musik på webbplatsen kan vara: WAV, AU, MIDI, MP3, OGG (tillägg). Musikfiler laddas upp på sajten, eller så används länkar till de sajter där ljudfilen finns, huvudsaken är att den är allmän egendom.

Internetinnehåll är dock ofta unikt, till exempel inkluderar det inte bara musik, utan även kommentarer från artister, intervjuer, alla möjliga berättelser om skapande, etc.

Ett otroligt antal verktyg har skapats för att ladda ner strömmande innehåll från Internet - vissa av dem är universella, andra är "skräddarsydda" för specifika tjänster. Vissa program får tillgång till källljud- och videofiler och läser dem helt enkelt byte-för-byte från Internet, medan vissa kan ladda ner filer, ladda filer i flera strömmar, arbeta med grupper av filer etc. Strömbeskrivningen kan vara en xml fil i formatet ASX (för Windows Media Player) eller lagras i filer av RealAudio-formatet (tilläggen .ra och .rm - för ljud, .rv - för video) etc. Sådana strömmar levereras inte bara via standardprotokollen http , udb / tcp, men också via special - rtsp, mms, rtp, såväl som genom peer-to-peer-teknologier som används till exempel i en så populär internet-tv-tjänst som SopCast. Naturligtvis, för att spela dessa format, behöver du en lämplig klient - säg Windows Media Player, VLC mediaspelare, etc. Den senare kan förresten inte bara spela upp strömmande innehåll, utan också spara det på lokala enheter. Detta är vad vi kommer att använda, eftersom de flesta resurser är ganska tuffa för honom.

Så för att spela in ett radioprogram eller podcast online måste du först skaffa en länk till det strömmande innehållet och sedan skriva in det i VLC-spelaren. Om webbplatsen använder Windows Media Player för att spela upp ljud blir det lätt att komma till länken. Du måste högerklicka på spelaren som är inbyggd i sajtsidan och välja "Egenskaper". I fältet "Plats", hitta adressen och kopiera den till urklipp. Om webbplatsen använder en Flash-spelare eller en spelare som utvecklats på basis av HTML5, är det troligt att du kommer att behöva rota igenom sidans källkod eller vända dig till speciella verktyg för att "riva ut" länkar.

Nästa steg är att konvertera strömmande ljud. Du kanske inte kan säga att denna operation i VLC är enkel och uppenbar. Tvärtom är det krångligt och förvirrande. Genom att använda menykommandot "Media Öppna URL" kan strömmande innehåll skrivas till en fil. Som standard är VLC konfigurerad för att spela upp länken, och för att spara den till en fil måste du ändra läget till "Konvertera" i dialogrutan som öppnas. Dialogrutan kommer att ändras - målfilen visas i ett nytt fönster och en profil väljs (dvs. formatet som inspelningen kommer att sparas i). Efter att ha klickat på "Start"-knappen börjar spelaren kopiera det strömmande ljudet till en fil. Han gör detta helt obemärkt och kan i princip skriva så länge han vill - den här processen måste kontrolleras oberoende. Observera att när du stoppar och fortsätter konverteringsprocessen, återställs den resulterande filen till noll. Så du måste byta namn på tidigare sparade filer.

Det är ganska uppenbart att det är mycket besvärligt att upprepa en sådan operation varje gång. Speciellt om du behöver skriva olika trådar vid olika tidpunkter. VLC-spelaren tillhandahåller ett enkelt schemalagt nedladdningsverktyg som kallas VLC Configurator. Den indikerar vad och var man ska skriva (dessa parametrar är konfigurerade på samma sätt som beskrivits ovan) och hur länge. Om du till exempel behöver spela in ett visst internetradioprogram varje dag, bör du ställa in alternativen "Repetera" och "Intervall mellan upprepningar" i dialogrutan. Nu, efter lanseringen, kommer programmet självständigt att konvertera strömmande innehåll.

Förresten, VLC kommer också att hjälpa när du konverterar strömmar, till exempel ASF-filer till MP3, vilket är mer bekant och förståeligt av pocketspelare. Denna operation kan göras antingen manuellt, konvertera en lokal fil varje gång, eller automatiskt med hjälp av ett enkelt Powershell-skript, som, som du vet, ingår i Windows 7 och är tillgängligt i tidigare versioner av detta operativsystem. Skriptet skickas flera parametrar - sökvägen till filerna, filmasken och, valfritt, den resulterande mappen där filerna lagras (om det inte anges skrivs filerna till källkatalogen). Inuti slingan anropas VLC-programmet, till vilka parametrar skickas: vad som ska kodas, var ska skrivas och de faktiska kodningsparametrarna. När kodningen är klar laddas VLC ur RAM-minnet. Du kan verifiera detta genom den sista konstruktionen, som väntar på att processen ska laddas ur från minnet. Du kan ange ett sådant skript i vilken textredigerare som helst - anteckningsblock eller en speciell "visuell" editor Powershell ISE. Om du sparar den i en fil, till exempel convert.ps1, så startas den med en konstruktion som:

. convert.ps1 c:  filer  musik *.asf.

Sammanfattningsvis är det värt att notera några fler funktioner i manuset. Windows-operativsystemet anger inte automatiskt sökvägar till program, så skriptet måste också ange sökvägen till vlc.exe: i 64-bitarsversionen - C: 'Program Files (x86)'  VideoLAN  VLC (observera att rader med mellanslag är omges av citattecken) och i 32-bitars - C:  'Program Files'  VideoLAN  VLC  . Du bör också se till att du lämnar VLC-programmet innan du kör skriptet, annars kommer waitforexit()-metoden att köras på obestämd tid (på grund av att programmet som anropas skriptet avslutas, men en kopia av det kommer att finnas kvar). Det är naturligtvis också möjligt att bearbeta processidentifierare i ett skript, men en sådan möjlighet kommer bara att komplicera det. För att lösa detta problem bör du helt enkelt lägga till en forcering av alla körande VLC i början av skriptet: ps vlc* | %($_.kill()). En annan funktion är relaterad till säkerhetssystemet Windows 7, som kräver att alla skript är signerade. Kommandot Set-ExecutionPolicy RemoteSigned kan hjälpa dig att kringgå denna begränsning; du måste köra den i Powershell som administratör.

Skript convert.ps1 på Powershell för att konvertera strömmande innehåll till MP3

param ( $inputpath, $wildcard, $outputpath = $inputpath)

ls -path $inputpath  $jokertecken | % (

skrivvärd $outputfil

vlc -i dummy $_.fullname ¨:sout=#transcode (acodec=mp3,ab=128,channels=2):standard (access=file,mux=asf,dst=$outputfile)¨ vlc://quit

Extrahera ljud från FLV-videor

Ett annat exempel på att använda VLC och Powershell tillsammans är att extrahera ljud från Flash-videor i FLV-format. Sådana videoklipp lagras på specialiserade portaler, som den välkända YouTube. Naturligtvis gör Google och andra videovärdägare sitt bästa för att förhindra nedladdning av innehåll, men det kommer alltid att finnas sätt att kringgå skyddet och få den video du gillar...

Men uppgiften som diskuteras här är följande: hur man extraherar ljud från en FLV-fil som laddats ner med någon känd metod för att till exempel lyssna på den i en pocket player. En sådan operation ligger inom VLC:s kapacitet, både i GUI och från kommandoraden. Förresten, i det första fallet måste du göra nästan samma uppsättning åtgärder som tidigare: välj kommandot "Media - Konvertera/Spara" från menyn, ange käll- och resultatfiler, såväl som konverteringsparametrar, d.v.s. motsvarande codec.

För att utföra manuell konvertering med Powershell behöver du, som tidigare, konstruera ett litet skript (låt oss kalla det flv2mp.ps1), dit namnen på käll- och målmapparna skickas (som standard, samma som källan). Hela dess trick ligger i de godkända parametrarna: eftersom en video inte krävs, bör du använda dummy-parametern, definiera filparametrarna i standardblocket, och så att skriptet inte stör dig med popup-fönster, blockera dem helt enkelt med alternativet –dummy-quiet –sout.

param($inputpath, $outputpath = $inputpath)

ls -path $inputpath  *.flv | % (

$outputfile = join-path $outputpath($_.name.replace($_.extension, '.mp3'))

skrivvärd $outputfil

vlc $filnamn -I dummy --dummy-quiet --sout ¨#transcode (acodec=mp3,vcodec=dummy):standard (access=file,mux=raw,dst=’$outputfile’)¨ vlc://quit

ps vlc | %($_.waitforexit())

Musik på sajten är mer sällsynt än normen. När du infogar musik på en webbplats måste du förstå att vissa användare kan bli helt avstängda av det. I den här artikeln kommer vi att titta på flera alternativ för att infoga musik på en webbplats, och även titta på hur man gör bakgrundsmusik.

Hur man infogar bakgrundsmusik på en webbplats

Att infoga bakgrundsmusik på en webbplats är det farligaste alternativet när det gäller att förlora besökare. Eftersom bakgrundsmusiken inte bara kan stängas av, utan dess volym kan inte justeras på något sätt (allt beror på den aktuella volymen på datorn). Så du måste tänka hundra gånger innan du sätter in bakgrundsmusik.

Det finns två sätt att infoga musik i html

Alternativ 1. Via html-tagg

Syntax för att infoga bakgrundsmusik

Vid taggen det finns flera attribut:

  • loop="value" - antalet repetitioner av musiken (om -1, upprepas sedan oändligt)
  • balance="value" - stereobalans (från -10000 till 10000)
  • volym="värde" - volym (max 0, minimum -10 000)

Musik spelas automatiskt när sidan laddas.

Till exempel

Alternativ 2. Genom en tagg

Syntax för att infoga ett objekt med musik

Vid taggen Följande attribut kan användas:

  • width="value" - width (i pixlar eller procent)
  • height="value" - höjd (i pixlar eller procent)
  • align="value" - justering (vänster - vänster, höger - höger, mitten - mitten)
  • hidden="value" - panelsynlighet (true - hide, false - show), som standard är panelen synlig
  • autostart="value" - spela musik när du laddar (sant - ja, falskt - nej)
  • loop="value" - värde sant - spela i en cirkel, falskt - en gång

Till exempel

Standardspelaren kommer att se olika ut för varje webbläsare, så vi kommer inte att överväga var och en av dem separat.

I html5 kan du använda taggen

Innebörden av att använda taggen

Taggsyntax

Följande attribut kan användas:

  • autoplay="value" - slå på musik direkt när sidan laddas
  • controls="value" - visa spelarens kontrollpanel i webbläsaren
  • loop="value" - ansvarig för cyklicitet
  • preload="value" - ladda musik direkt när sidan laddas

De övervägda alternativen, enligt min mening, är inte idealiska lösningar, eftersom de alla är baserade på standardspelare. Varje webbläsare kommer att ha sin egen standardspelare, och i vissa kanske den inte fungerar alls. Därför är det bäst att ladda ner spelaren till din webbplats och ladda ner musik från den. En sådan spelare kommer att ha funktioner för att stoppa, justera volymen etc. - Allt nödvändig uppsättning för den vanliga användaren.