IL ' silenziato ' consente agli sviluppatori di controllare la riproduzione audio fornendo loro un'opzione per disattivare o riattivare l'audio in base alle loro esigenze. Fornire agli utenti finali la libertà di disattivare o riattivare l'audio migliora la loro esperienza di navigazione. Inoltre, l'utilizzo di JavaScript consente il controllo dinamico che fornisce un migliore controllo sulla riproduzione audio.
Questo articolo descriverà l'utilizzo della proprietà HTML con audio disattivato DOM utilizzando JavaScript.
Come utilizzare la proprietà HTML con audio disattivato in JavaScript?
IL ' silenziato La proprietà ' viene spesso utilizzata per disattivare o riattivare l'audio su una pagina Web. Quando il valore di “ audio.disattivato La proprietà ' è impostata come ' VERO ', l'audio viene disattivato e per riattivarlo, il' silenziato La proprietà ' deve essere impostata come ' falso ”. Inoltre, la proprietà disattivata è integrata con altri controlli multimediali e consente la compatibilità tra browser.
Sintassi
La sintassi per la proprietà HTML DOM audio disattivato in JavaScript è indicata di seguito:
oggettoselezionato.muted = VERO | falso
Dove ' selezionatoOgg ' è qualsiasi file audio il cui audio verrà disattivato. Questa proprietà può memorizzare solo due valori: “ VERO ' O ' falso ”. Se questa proprietà è impostata su true, il file audio viene disattivato e viceversa.
Ora, esaminiamo alcuni esempi per una migliore comprensione del DOM HTML “ silenziato ' proprietà.
Esempio 1: Disattivazione dell'audio del file audio
In questo esempio, il file selezionato verrà disattivato utilizzando il comando ' silenziato ' proprietà. Ad esempio, visita il blocco di codice seguente:
< div >< h2 stile = 'colore: verde mare;' > Proprietà audio disattivato DOM h2 >< fratello >
< Audio id = 'audio demo' controlli >
< fonte src = 'audio.mp3' tipo = 'audio/mpeg' >
Audio >
< fratello >
< pulsante al clic = 'muteSetter()' > Impostato su Muto pulsante >
div >
< sceneggiatura >
permettere c = documento.getElementById ( 'audio demo' ) ;
funzione muteSetter ( ) {
c.muto = VERO ;
mettere in guardia ( 'Disattivato con successo!' )
}
sceneggiatura >
Spiegazione del codice:
-
- Innanzitutto il genitore” div Viene creato l'elemento ' che contiene l'elemento ' ' tag con un ID di ' demoAudio ”. Questo elemento contiene un singolo ' fonte ” che contiene l'indirizzo del file audio selezionato insieme al suo tipo.
- Successivamente viene creato il pulsante che richiama il comando “ muteSetter() ' utilizzando la funzione ' al clic 'ascoltatore di eventi.
- Quindi, inserisci '
' e memorizza il riferimento dell'elemento 'audio' in una variabile denominata ' C ”. - Dopodiché, il “ muteSetter() ' viene creata la funzione per impostare il valore per ' silenziato 'proprietà a' VERO ”. Ciò disattiva l'audio e visualizza anche il messaggio di conseguenza nella casella di avviso.
Dopo la compilazione:
La gif sopra mostra che l'audio è stato disattivato utilizzando la proprietà muted.
Esempio: disattivare e riattivare l'audio utilizzando la proprietà disattivata
In questo esempio, il file audio selezionato verrà disattivato, riattivato e il suo stato corrente verrà recuperato utilizzando il comando ' silenziato ' proprietà. Ad esempio, visita il codice seguente:
< div >< Audio id = 'audio demo' controlli >
< fonte src = 'audio.mp3' tipo = 'audio/mpeg' >
Audio >< fratello >
< pulsante al clic = 'Muto()' > Disattiva l'audio pulsante >
< pulsante al clic = 'attiva l'audio()' > Riattiva l'audio pulsante >
< pulsante al clic = 'muteStatus()' > Stato muto pulsante >
div >
< sceneggiatura >
var z = document.getElementById ( 'audio demo' ) ;
funzione Muto ( ) {
z.muto = VERO ;
}
funzione attiva l'audio ( ) {
z.muto = falso ;
}
funzione muteStatus ( ) {
mettere in guardia ( z.muto ) ;
}
sceneggiatura >
La spiegazione del codice sopra è la seguente:
-
- Innanzitutto, il file audio viene inserito nella pagina web utilizzando il codice HTML ' ' E '
' tag. - Successivamente vengono creati tre pulsanti che richiamano le funzioni denominate “ Muto() ”, “ attiva l'audio() ', E ' muteStatus() ”. Queste funzioni vengono richiamate quando l'utente fa clic sui pulsanti corrispondenti.
- Successivamente, definisci queste funzioni impostando i valori true e false per “ Muto() ' E ' attiva l'audio() 'funzioni. Per il ' muteStatus() ', allega solo il simbolo ' silenziato ' con il riferimento audio per recuperare lo stato corrente della proprietà mute.
- Innanzitutto, il file audio viene inserito nella pagina web utilizzando il codice HTML ' ' E '
Dopo la compilazione l’output sarà il seguente:
L'output mostra che il file audio è stato disattivato, riattivato e anche il suo stato viene controllato utilizzando il pulsante ' silenziato ' proprietà.
Conclusione
La proprietà HTML DOM audio disattivato viene utilizzata inserendo prima il file audio nella pagina Web utilizzando il codice HTML “ Audio ' E ' fonte ' elementi. Successivamente, il riferimento a questo audio viene memorizzato in una variabile all'interno del codice JavaScript e il ' silenziato 'la proprietà è collegata ad esso. Per disattivare l'audio, questa proprietà è impostata su ' VERO ' E ' falso ' per scenari riattivati. Questo blog ha dimostrato il processo di funzionamento della proprietà audio disattivato del DOM.