LevelNetwork Voxis Accessibility & Audio Summarizer

Documentazione Ufficiale - Versione 1.0.7 (PRO)

1. Introduzione

Benvenuto in LevelNetwork Voxis Accessibility & Audio Summarizer. Questo plugin aggiunge un player audio elegante e accessibile al 100% al tuo sito WordPress, convertendo i tuoi contenuti testuali in audio parlato (Sintesi Vocale / Text-to-Speech) utilizzando le tecnologie native del browser Web Speech API.

Il nostro obiettivo è aumentare l'accessibilità e offrire un modo alternativo ai tuoi utenti per consumare i tuoi contenuti. Questa guida spiega come configurare la versione gratuita del plugin sfruttandone appieno il potenziale.

2. Impostazioni Generali

Area di Visualizzazione & Posizionamento

Puoi scegliere dove aggiungere automaticamente il player:

  • Articoli (Posts): Il player apparirà negli articoli del blog.
  • Pagine (Pages): Il player apparirà sulle pagine standard.
  • Entrambi: Il player sarà abilitato a livello globale.
  • Nessuno: La visualizzazione automatica viene disabilitata. Puoi quindi utilizzare lo shortcode [voxis_summarizer_player] per inserire manualmente il player in qualsiasi punto del tuo sito, anche all'interno dei Page Builder.

Inoltre, se utilizzi il posizionamento automatico (Articoli, Pagine o Entrambi), puoi scegliere di visualizzare il player Sopra il contenuto o Sotto il contenuto.

Escludi tramite ID

Se desideri attivare il player su quasi tutti gli articoli, ma escluderlo da alcune pagine specifiche (come la pagina "Contattaci" o i "Termini di Servizio"), puoi definire un elenco di ID di Articoli o Pagine separati da virgole. Il player non verrà mai caricato su questi ID.

Anteponi il Titolo all'Audio

Per impostazione predefinita, Voxis anteporrà il titolo dell'articolo o della pagina alla lettura audio e ai prompt di generazione dell'IA. Tuttavia, se il tuo Selettore CSS del Contenuto cattura esplicitamente anche il titolo, il player potrebbe leggerlo due volte. Puoi deselezionare questa casella per disabilitare l'aggiunta automatica del titolo.

Selettore CSS del Contenuto

Configurazione Cruciale: Assicurati che il plugin legga solo il contenuto dell'articolo (e non menu, barre laterali o piè di pagina) specificando il selettore CSS corretto che racchiude il tuo testo.

Per impostazione predefinita, questo valore è impostato su .entry-content, .post-content, article, che funziona con il 90% dei temi classici di WordPress. Se utilizzi un Page Builder, potrebbe essere necessario modificarlo:

  • Elementor: Prova con .elementor-widget-theme-post-content.
  • Divi: Prova con .et_pb_post_content.
  • Puoi ispezionare il tuo sito (Tasto Destro -> Ispeziona Elemento) per trovare la classe del contenitore principale dei tuoi articoli e inserirla qui (es. .my-article-content).

Escludi Selettori CSS

Se il tuo tema o altri plugin (come quelli per il tempo di lettura o i pulsanti di condivisione social) inseriscono contenuti direttamente nel corpo dell'articolo, Voxis potrebbe provare a leggerli ad alta voce.

Per evitare questo problema, utilizza il campo Escludi Selettori CSS per inserire un elenco separato da virgole di nomi di classi CSS o ID che desideri ignorare.

  • Esempio: .read-time, .share-buttons, #related-posts
  • Page Builder (Enfold/Avada): Voxis PRO pre-filtra automaticamente gli shortcode nidificati prima di generare l'audio tramite IA. Puoi specificare con successo classi di shortcode composte (es. .flex_column.voxis-exclude) e il generatore audio escluderà perfettamente quegli interi layout.

Quando il player legge l'articolo, salterà completamente il testo situato all'interno di questi elementi HTML.

3. Configurazione di Voce, Velocità e Volume

Personalizza il comportamento predefinito dell'audio di sintesi vocale che i visitatori ascolteranno.

Fai clic sul pulsante Test per ascoltare una breve anteprima audio della voce e del volume selezionati per valutarne il tono.

4. Controlli del Player per l'Utente

Nella sezione "Opzioni del Player Frontend", puoi decidere quanta libertà di personalizzazione delegare al visitatore del sito.

  • Mostra traccia audio: Visualizza la barra di avanzamento in tempo reale.
  • Mostra durata stimata: Mostra una stima del tempo rimanente, es. -4:30. Aiuta gli utenti a capire il tempo richiesto per l'ascolto del contenuto.
  • L'utente può modificare la velocità della voce: Aggiunge un menu a discesa al player che consente al visitatore di accelerare o rallentare la voce (da 0.50x a 2.00x). Questa preferenza viene salvata nel browser per le visite future.
  • Mostra barra del volume: Integra uno slider interattivo che consente all'utente di abbassare o alzare il volume in base al proprio livello di comfort. Sotto questa voce, puoi configurare il Volume di avvio predefinito.
  • Notifica barra del volume: Se abilitata, gli utenti vedranno una notifica informativa che spiega che le regolazioni del volume della voce nativa hanno effetto all'inizio della frase successiva.
  • L'utente può selezionare la voce del proprio dispositivo: Dispositivi diversi dispongono di pacchetti vocali differenti. Abilitando questa opzione, un utente (ad esempio su iPhone) può cambiare manualmente le voci direttamente dal player.
  • Condividi Frammento Audio (Share Audio Snippet): Aggiunge un pulsante di condivisione che consente agli utenti di generare un URL speciale collegato direttamente al punto esatto dell'audio che stanno ascoltando (tramite il parametro ?voxis_t=XX), avviando la riproduzione automatica al clic. Nota: questo pulsante è disabilitato durante la riproduzione del Riassunto IA.

5. Aspetto e CSS Personalizzato

Il player è progettato per mettere in risalto i tuoi contenuti mantenendo un design estremamente minimale. Scegli tra una delle 10 Tavolozze di Colori Predefinite per allineare il riproduttore audio al branding del tuo sito.

Editor CSS Personalizzato

Per gli sviluppatori o per personalizzazioni visive avanzate, la casella CSS Personalizzato supporta fogli di stile personalizzati.

Novità: L'editor CSS ora include la numerazione delle righe e la validazione della sintassi integrata. Se dimentichi uno spazio, una parentesi o i due punti, verrai avvisato direttamente con il numero di riga per evitare stili errati!

Struttura di base delle classi che puoi sovrascrivere:

/* Contenitore Generale del Player */
.voxis-player-wrapper {
    /* Es. rende i bordi più arrotondati */
    border-radius: 20px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Pulsanti Riproduci / Pausa */
.voxis-player-wrapper .voxis-btn {
    font-weight: 700;
    text-transform: uppercase;
}

/* Pulsante Condividi Frammento */
#voxis-share-btn {
    /* Personalizza il pulsante di condivisione circolare */
    border-radius: 50%;
}

/* Finestra Tooltip / Popup di Condivisione */
#voxis-share-tooltip {
    /* Modifica l'aspetto o la larghezza del tooltip */
    background: var(--voxis-btn-bg);
}
#voxis-share-link {
    /* Stile della casella di testo contenente l'URL da copiare */
    background: #fff;
}

/* Tooltip del Tempo di Avanzamento */
#voxis-time-tooltip {
    background: var(--voxis-btn-bg);
    color: var(--voxis-btn-text);
}

/* Traccia di Avanzamento (Sfondo e Riempimento) */
.voxis-track-container {
    background-color: var(--voxis-bg); 
}
.voxis-track-progress {
    background-color: var(--voxis-status-color); 
}

/* Contenitore Controllo Volume & Slider */
.voxis-volume-container {
    background-color: var(--voxis-bg);
}
.voxis-volume-progress {
    background-color: var(--voxis-status-color);
}
.voxis-volume-label {
    font-size: 11px;
    color: var(--voxis-icon-color);
}

/* Pulsanti di Salto Audio (-10s / +10s) */
.voxis-jump {
    padding: 0 8px; /* Regola lo spazio intorno ai pulsanti di salto */
}
.voxis-jump .voxis-icon {
    font-size: 12px; /* Dimensione dell'icona di salto */
}

/* Pulsante di Download della Voce Neurale */
.voxis-download {
    border-radius: 50%; /* Forma circolare */
    background-color: var(--voxis-border);
}

/* Pulsanti di Evidenziazione Testo & Sincronizzazione */
.voxis-highlight, .voxis-tracking {
    /* Personalizza i pulsanti delle opzioni di sincronizzazione */
    border-radius: 50%;
}

/* Contenitore del Player Flottante */
.voxis-is-floating {
    bottom: 20px !important; /* Distanza dal fondo dello schermo */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

6. Risoluzione dei Problemi