WordPress Hosting

texto a voz wordpress

Añade voz a tus artículos de WordPress con IA: convierte texto en audio fácilmente

¿Te imaginas que tus visitantes puedan «escuchar» tus artículos mientras hacen otras cosas? ¿O que los clientes de tu tienda online recibieran descripciones de productos en audio mientras navegan? Todo esto es posible gracias a la tecnología TTS (Text-to-Speech) y la inteligencia artificial.

En esta guía vamos a aprender, paso a paso y con soluciones para cualquier nivel de conocimientos, cómo implementar funciones de texto a voz en tu WordPress, desde lo más básico hasta opciones avanzadas. Todo explicado de manera sencilla y con ejemplos prácticos que puedes aplicar ya mismo.

Índice de contenidos

¿Qué es TTS? (spoiler: texto a voz)

xr:d:dafeipp3bpm:8,j:29024023260,t:22062009

TTS o «texto a voz» es una tecnología que convierte texto escrito en audio hablado.

Y lo mejor de todo es que es una tecnología que ha evolucionado mucho, y lo que antes sonaba robótico y artificial, ahora con la IA suena natural y humano, así que estamos en el momento más indicado para aprovecharla.

¿Cómo funciona?

  • Analiza el texto escrito.
  • Lo procesa con algoritmos de IA.
  • Genera un audio con voz sintética realista.
  • Lo reproduce directamente en el navegador.

Tipos de texto a voz disponibles:

  • TTS básico del navegador: Gratuito pero con voces limitadas y poco naturales.
  • TTS con IA avanzada: Servicios como ElevenLabs, Amazon Polly o Google Cloud que ofrecen voces muy realistas.
  • TTS híbrido: Combinación de ambos, usando el navegador como respaldo cuando no hay internet.

Ventajas de aplicar texto a voz en webs de contenidos

Añadir audio a tu web de contenidos no es solo una mejora técnica, es una ventaja competitiva real:

Mejora la experiencia de los usuarios

  • Multitarea: Los usuarios pueden escuchar mientras conducen, caminan o hacen deporte.
  • Accesibilidad: Personas con dificultades visuales o dislexia acceden mejor al contenido.
  • Comodidad: Ideal para artículos largos que cansan la vista.

Aumenta la retención

  • Los visitantes permanecen más tiempo en tu web.
  • Mejora las métricas de engagement.
  • Reduce la tasa de rebote.

Diferenciación competitiva

  • Pocas webs españolas usan TTS de calidad.
  • Aporta valor añadido frente a la competencia.
  • Proyecta imagen de innovación tecnológica.

SEO y posicionamiento

  • Mayor tiempo de permanencia en página.
  • Reduce la tasa de rebote.
  • Aumenta las páginas vistas por sesión.

Ventajas específicas para tiendas online

En ecommerce, el TTS abre posibilidades muy interesantes:

Mejora de conversiones

  • Descripciones habladas: Los productos se «explican solos».
  • Mayor satisfacción: El cliente no tiene que leer descripciones largas.
  • Experiencia premium: Sensación de atención personalizada.

Casos de uso prácticos en tiendas

  • Audio automático de características principales del producto.
  • Instrucciones de uso habladas.
  • Políticas de envío y devolución en audio.
  • Testimonios de clientes reproducidos en voz.

Ventaja en dispositivos móviles

  • En móvil es más cómodo escuchar que leer.
  • Perfecto para usuarios que navegan con una mano.
  • Ideal mientras el usuario hace otras tareas.

Accesibilidad e inclusión

  • Personas mayores que prefieren escuchar.
  • Usuarios con problemas visuales.
  • Clientes con dislexia o dificultades de lectura.

Plugins disponibles en WordPress.org

Vamos a ver algunos plugins que puedes instalar directamente desde tu WordPress.

BeyondWords (freemium)

Qué es: Plataforma completa de audio con IA que ofrece voces muy naturales. Plugin oficial en WordPress.org con más de 2.000 instalaciones activas.

Instalación:

  1. Ve a Plugins → Añadir nuevo.
  2. Busca «BeyondWords».
  3. Instala y activa el plugin oficial.
  4. Crea cuenta gratuita en BeyondWords.io.
  5. En el Dashboard de BeyondWords ve a la sección de Integrations > Connect your CMS.
  6. Copia el Project ID y la API Key.

Configuración paso a paso:

  1. Ve a BeyondWords en tu escritorio de administración de WordPress.
  2. Conecta tu cuenta con la clave API y el Project ID copiados antes.
  3. Ve a los ajustes, selecciona el idioma Spanish (Castilian) y una voz en español (Álvaro, Irene o Elvira).
  4. Configura reproducción automática al menos en las entradas.
  5. Personaliza el reproductor de audio.

Cómo aplicarlo:

  • Automático: Se añade automáticamente a todos los posts una vez configurado.
  • Manual: Usa el shortcode [beyondwords] donde quieras el reproductor.
  • Personalizado: Desde el editor de Gutenberg con su bloque específico.

Ventajas:

  • Voces IA muy naturales en español.
  • Plan gratuito (Pilot) con 5 artículos gratis.
  • Integración perfecta con WordPress.
  • Compatible con Gutenberg.

Desventajas:

  • Versión gratuita muy limitada.
  • Requiere registro en plataforma externa.
  • Planes premium desde 30 $/mes.

Trinity Audio (freemium)

Qué es: Plugin oficial de Trinity Audio con más de 6.000 instalaciones activas. Especializado en medios y webs de noticias.

Instalación:

  1. Busca «Trinity Audio» en plugins.
  2. Instala y activa el plugin oficial..

Configuración paso a paso:

  1. Ve a los ajustes de Trinity Audio.
  2. Selecciona tipos de contenido (entradas, páginas).
  3. Elige idioma y voz.
  4. Configura el reproductor.

Cómo aplicarlo:

  • Automático: El reproductor se añade automáticamente según la configuración.
  • Shortcode: Usa [trinity-audio] para añadirlo en una posición específica.
  • Widget: Disponible widget para barras laterales.

Ventajas:

  • Versión gratuita (5 artículos por mes).
  • Voces de calidad profesional.
  • Logs de actividad.

Desventajas:

  • Personalización limitada en versión gratuita.
  • Voces en español limitadas.
  • Marca de agua en reproductor.

GSpeech (freemium)

Qué es: Plugin versátil con más de 8.000 instalaciones que combina voces del navegador con APIs externas.

Instalación:

  1. Busca «GSpeech» en plugins.
  2. Instala la versión gratuita.
  3. Activa el plugin.

Configuración paso a paso:

  1. Ve a «GSpeech > Activate» y activa una cuenta, eligiendo tu idioma.
  2. A continuación ve a «GSpeech > Settings».
  3. Confirma que esté activo «Auto Enable».
  4. Selecciona el idioma español si no lo estaba ya.
  5. Elige en qué contenidos mostrar el reproductor, categorías, tono, velocidad, etc.

Cómo aplicarlo:

  • Automático: Añade botones flotantes automáticamente.
  • Shortcode: [gspeech style="1" language="es"]Texto a leer[/gspeech]
  • Widget: Disponible widget para áreas de widgets.
  • PHP: Función gspeech_text('Tu texto aquí', 'es');

Ventajas:

  • Versión gratuita funcional (50 mil caracteres por mes).
  • Múltiples opciones de implementación.
  • Incluye shortcodes personalizados.
  • Control de velocidad por usuario.
  • Resaltado del texto mientras lee.

Desventajas:

  • Versión premium para disponer de mejores voces.
  • Quizás demasiados reproductores visibles (fijo, flotantes, al seleccionar texto).

Tabla comparativa de plugins disponibles en WordPress.org

Plugin Instalaciones Tipo Calidad voz Configuración Mejor para
BeyondWords +2.000 Freemium ★★★★☆ Media Webs profesionales
Trinity Audio +6.000 Freemium ★★★★☆ Fácil Medios y noticias
GSpeech +8.000 Freemium ★★★☆☆ Fácil Webs medianas

Servicios premium y soluciones avanzadas

Para webs con presupuesto que buscan máxima calidad:

Amazon Polly (servicio profesional)

  • Qué es: API de Amazon Web Services con voces neurales de alta calidad.
  • Precio: 4 $ por millón de caracteres (primeros 5 millones gratuitos al mes)
  • Implementación: Requiere desarrollo personalizado o plugin de terceros (no hay plugin oficial actualizado en WordPress.org)

ElevenLabs (servicio premium)

  • Qué es: La mejor calidad de voz sintética disponible, indistinguible de voz humana.
  • Precio: Desde 5 $/mes (30.000 caracteres) hasta 99 $/mes (500.000 caracteres).
  • Implementación: Solo mediante desarrollo personalizado con API.

Google Cloud Text-to-Speech (servicio profesional)

  • Qué es: Servicio de Google con voces WaveNet de alta calidad.
  • Precio: 4 $ por millón de caracteres.
  • Implementación: Requiere configuración de Google Cloud y desarrollo personalizado.

Microsoft Voz de Azure AI (servicio profesional)

  • Qué es: Servicio de Microsoft con voces neurales de última generación.
  • Precio: 4 $ por millón de caracteres.
  • Implementación: Requiere cuenta Azure y desarrollo personalizado.

Implementación práctica para webs de contenidos

Aquí tienes los métodos paso a paso con instrucciones completas:

Método 1: Usando BeyondWords (recomendado para calidad)

Paso 1: Configuración inicial

  1. Instala el plugin BeyondWords desde WordPress.org.
  2. Regístrate en beyondwords.io (plan gratuito disponible).
  3. Obtén tu API key desde el dashboard.
  4. En WordPress, ve a BeyondWords → Settings.
  5. Introduce tu API key y guarda.

Paso 2: Configurar voz y contenido

  1. Selecciona voz española (recomiendo Elena para femenina, Mateo para masculina).
  2. En «Content Types» marca «Posts» y «Pages».
  3. Configura posición: «Before content» o «After content».
  4. Activa «Auto-generate audio» para entradas nuevas.

Paso 3: Personalizar el reproductor

  1. Ve a «Player Settings».
  2. Personaliza colores para que coincidan con tu tema.
  3. Activa «Show download button» si quieres permitir descargas.
  4. Configura velocidades disponibles (0.8x, 1x, 1.2x).

Cómo aplicarlo:

  • Automático: Una vez configurado, todas las entradas nuevas tendrán audio automáticamente.
  • Posts existentes: Ve a cualquier post → Edit → en la caja meta de BeyondWords haz clic en «Generate Audio».
  • Manual: Usa el shortcode [beyondwords_player] donde quieras el reproductor.
  • Por código: Añade <?php echo do_shortcode('[beyondwords_player]'); ?> en tus plantillas.

Método 2: Con Trinity Audio (mejor para gratuito)

Paso 1: Setup inicial

  1. Instala plugin Trinity Audio.
  2. Regístrate en trinityaudio.ai.
  3. Verifica tu email y accede al dashboard.
  4. Copia tu Player ID.

Paso 2: Configuración del plugin

  1. Ve a «Trinity Audio → Settings» en WordPress.
  2. Pega el ID de tu reproductor.
  3. En «Post Types» selecciona donde quieres audio.
  4. Configura la «Player Position» (te recomiendo «After title»).

Paso 3: Personalización

  1. En «Player Settings» elige tus colores.
  2. Activa «Auto-play» si lo deseas (casi nunca recomendable).
  3. Configura «Skip to main content» para mejor accesibilidad.

Cómo aplicarlo:

  • Automático: Se aplicará a todos los posts según configuración.
  • Excluir posts: En el editor del post, marca «Disable Trinity Audio».
  • Solo algunos posts: Desactiva automático y usa shortcode [trinity_audio]
  • Personalizado: En plantillas usa <?php trinity_audio_player(); ?>

Método 3: Implementación con código personalizado (Web Speech API)

Para desarrolladores que quieren control total:

Paso 1: Añadir al functions.php

// Añadir botón TTS personalizado
function ayudawp_add_custom_tts($content) {
    if (is_single() && !is_admin()) {
        $tts_html = '
        <div class="ayudawp-tts-player">
            <button onclick="ayudawp_toggle_speech()" id="tts-btn" class="tts-control-btn">
                 Escuchar artículo
            </button>
            <div class="tts-controls" id="tts-controls" style="display:none;">
                <button onclick="ayudawp_pause_speech()" class="tts-mini-btn">⏸️</button>
                <button onclick="ayudawp_resume_speech()" class="tts-mini-btn">▶️</button>
                <button onclick="ayudawp_stop_speech()" class="tts-mini-btn">⏹️</button>
            </div>
        </div>';
        
        return $content . $tts_html;
    }
    return $content;
}
add_filter('the_content', 'ayudawp_add_custom_tts');

// Añadir JavaScript
function ayudawp_tts_scripts() {
    if (is_single()) {
        ?>
        <script>
        let ayudawp_utterance = null;
        let ayudawp_is_speaking = false;

        function ayudawp_toggle_speech() {
            if (!ayudawp_is_speaking) {
                ayudawp_start_speech();
            } else {
                ayudawp_stop_speech();
            }
        }

        function ayudawp_start_speech() {
            let content = document.querySelector('.entry-content, .post-content, .content').innerText;
            ayudawp_utterance = new SpeechSynthesisUtterance(content);
            
            // Buscar voz en español
            let voices = speechSynthesis.getVoices();
            let spanishVoice = voices.find(voice => voice.lang.includes('es'));
            if (spanishVoice) {
                ayudawp_utterance.voice = spanishVoice;
            }
            
            ayudawp_utterance.rate = 0.9;
            ayudawp_utterance.lang = 'es-ES';
            
            ayudawp_utterance.onstart = function() {
                ayudawp_is_speaking = true;
                document.getElementById('tts-btn').innerText = '⏹️ Detener';
                document.getElementById('tts-controls').style.display = 'inline-block';
            };
            
            ayudawp_utterance.onend = function() {
                ayudawp_is_speaking = false;
                document.getElementById('tts-btn').innerText = ' Escuchar artículo';
                document.getElementById('tts-controls').style.display = 'none';
            };
            
            speechSynthesis.speak(ayudawp_utterance);
        }

        function ayudawp_pause_speech() {
            speechSynthesis.pause();
        }

        function ayudawp_resume_speech() {
            speechSynthesis.resume();
        }

        function ayudawp_stop_speech() {
            speechSynthesis.cancel();
            ayudawp_is_speaking = false;
            document.getElementById('tts-btn').innerText = ' Escuchar artículo';
            document.getElementById('tts-controls').style.display = 'none';
        }

        // Cargar voces cuando estén disponibles
        speechSynthesis.onvoiceschanged = function() {
            // Las voces ya están cargadas
        };
        </script>
        <?php
    }
}
add_action('wp_footer', 'ayudawp_tts_scripts');

// CSS básico
function ayudawp_tts_styles() {
    if (is_single()) {
        ?>
        <style>
        .ayudawp-tts-player {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 10px;
            margin: 20px 0;
            text-align: center;
            border-left: 4px solid #007cba;
        }
        
        .tts-control-btn {
            background: #007cba;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 16px;
            margin-right: 10px;
        }
        
        .tts-control-btn:hover {
            background: #005a87;
        }
        
        .tts-mini-btn {
            background: #6c757d;
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 15px;
            cursor: pointer;
            margin: 0 3px;
            font-size: 14px;
        }
        
        .tts-mini-btn:hover {
            background: #5a6268;
        }
        </style>
        <?php
    }
}
add_action('wp_head', 'ayudawp_tts_styles');

Cómo aplicarlo:

  • Automático: Una vez añadido el código, aparece en todas las entradas.
  • Condicional: Modifica la condición if (is_single()) para personalizar dónde aparece.
  • Solo categorías específicas: Añade && in_category('nombre-categoria')
  • Excluir posts: Añade && !in_array(get_the_ID(), array(123, 456))

Tabla comparativa de métodos para webs de contenido

Método Dificultad Coste Automatización Calidad Implementación
BeyondWords automático Fácil Freemium Total Alta Plugin + configuración
Trinity Audio automático Fácil Freemium Total Media-alta Plugin + registro
Código Web Speech API Media Gratis Total Básica functions.php
Google Cloud custom Avanzada 4 $/millón Total Muy alta SDK + desarrollo

Implementación práctica para tiendas online

Aquí las opciones específicas para ecommerce con WooCommerce:

Método 1: BeyondWords para productos

Paso 1: Configurar para productos

  1. En «BeyondWords → Settings».
  2. En «Content Types» marca también «Products».
  3. Configura para que genere audio de descripciones de producto.

Paso 2: Personalizar para ecommerce

  1. Ve a un producto → Edit.
  2. En la caja meta de BeyondWords activa «Generate Audio».
  3. Personaliza el texto si quieres algo específico para audio.

Cómo aplicarlo:

  • Automático: Todos los productos nuevos tendrán audio de descripción.
  • Productos específicos: Activa solo en productos destacados o más caros.
  • Personalizado: Usa texto diferente para audio (más comercial que la descripción escrita).

Método 2: Audio personalizado para características

Código para functions.php:

// Audio personalizado para productos WooCommerce
function ayudawp_product_audio_button() {
    global $product;
    
    if (!$product) return;
    
    $name = $product->get_name();
    $price = $product->get_price_html();
    $description = $product->get_short_description();
    
    // Construir mensaje comercial
    $commercial_text = "Te presento " . strip_tags($name) . ". ";
    
    if (!empty($description)) {
        $commercial_text .= strip_tags($description) . ". ";
    }
    
    $commercial_text .= "Su precio es " . strip_tags($price) . ". ";
    
    // Añadir características si las hay
    $attributes = $product->get_attributes();
    if (!empty($attributes)) {
        $commercial_text .= "Entre sus características destacamos: ";
        $attr_count = 0;
        foreach ($attributes as $attribute) {
            if ($attr_count < 3) {
                $values = $attribute->get_options();
                if (!empty($values)) {
                    $commercial_text .= $attribute->get_name() . " " . implode(", ", $values) . ". ";
                    $attr_count++;
                }
            }
        }
    }
    
    $commercial_text .= "Si te interesa, añádelo al carrito. Para cualquier duda, no dudes en contactarnos.";
    
    echo '<div class="product-audio-commercial">
        <button onclick="ayudawp_play_product_audio()" class="product-audio-btn" id="product-audio-btn">
            ️ Escuchar presentación del producto
        </button>
        <div class="audio-controls-product" id="audio-controls-product" style="display:none;">
            <button onclick="ayudawp_pause_product()">⏸️</button>
            <button onclick="ayudawp_resume_product()">▶️</button>
            <button onclick="ayudawp_stop_product()">⏹️</button>
        </div>
    </div>
    
    <script>
    let ayudawp_product_utterance = null;
    
    function ayudawp_play_product_audio() {
        let text = `' . addslashes($commercial_text) . '`;
        ayudawp_product_utterance = new SpeechSynthesisUtterance(text);
        
        let voices = speechSynthesis.getVoices();
        let spanishVoice = voices.find(voice => voice.lang.includes("es"));
        if (spanishVoice) {
            ayudawp_product_utterance.voice = spanishVoice;
        }
        
        ayudawp_product_utterance.rate = 0.85;
        ayudawp_product_utterance.pitch = 1.1; // Tono más comercial
        
        ayudawp_product_utterance.onstart = function() {
            document.getElementById("product-audio-btn").style.display = "none";
            document.getElementById("audio-controls-product").style.display = "inline-block";
        };
        
        ayudawp_product_utterance.onend = function() {
            document.getElementById("product-audio-btn").style.display = "inline-block";
            document.getElementById("audio-controls-product").style.display = "none";
        };
        
        speechSynthesis.speak(ayudawp_product_utterance);
    }
    
    function ayudawp_pause_product() {
        speechSynthesis.pause();
    }
    
    function ayudawp_resume_product() {
        speechSynthesis.resume();
    }
    
    function ayudawp_stop_product() {
        speechSynthesis.cancel();
        document.getElementById("product-audio-btn").style.display = "inline-block";
        document.getElementById("audio-controls-product").style.display = "none";
    }
    </script>';
}
add_action('woocommerce_single_product_summary', 'ayudawp_product_audio_button', 25);

// CSS para productos
function ayudawp_product_audio_styles() {
    if (is_product()) {
        ?>
        <style>
        .product-audio-commercial {
            background: linear-gradient(45deg, #ff6b6b, #ff8e53);
            padding: 15px;
            border-radius: 10px;
            margin: 15px 0;
            text-align: center;
        }
        
        .product-audio-btn {
            background: white;
            color: #333;
            border: none;
            padding: 12px 20px;
            border-radius: 25px;
            cursor: pointer;
            font-weight: bold;
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
            margin-right: 10px;
        }
        
        .product-audio-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        }
        
        .audio-controls-product button {
            background: rgba(255,255,255,0.9);
            border: none;
            padding: 8px 12px;
            border-radius: 15px;
            margin: 0 3px;
            cursor: pointer;
        }
        </style>
        <?php
    }
}
add_action('wp_head', 'ayudawp_product_audio_styles');

Cómo aplicarlo:

  • Automático: Se añade a todos los productos en la posición 25 del summary.
  • Solo productos caros: Añade condición if ($product->get_price() > 100)
  • Solo categorías específicas: Añade if (has_term('categoria-slug', 'product_cat'))
  • Personalizar posición: Cambia el número 25 por otro (20 = antes del precio, 30 = después del botón añadir).

Método 3: Audio de ayuda en la página de pago

Código para proceso de compra:

// Ayuda por voz en checkout
function ayudawp_checkout_audio_help() {
    if (is_checkout()) {
        ?>
        <div class="checkout-audio-helper">
            <button onclick="ayudawp_play_checkout_help()" class="checkout-help-btn">
                 ¿Necesitas ayuda con tu pedido?
            </button>
        </div>
        
        <script>
        function ayudawp_play_checkout_help() {
            let help_text = "Te ayudo con tu pedido paso a paso. " +
                           "Primero revisa que todos los productos en tu carrito sean correctos. " +
                           "Luego completa tus datos de facturación con información real. " +
                           "Si el envío es a otra dirección, márcalo y completa esos datos también. " +
                           "Después elige tu método de pago preferido. " +
                           "Y finalmente revisa todo y confirma tu pedido. " +
                           "Si tienes alguna duda, puedes contactarnos por teléfono o WhatsApp.";
            
            let utterance = new SpeechSynthesisUtterance(help_text);
            utterance.lang = "es-ES";
            utterance.rate = 0.8; // Más lento para instrucciones
            speechSynthesis.speak(utterance);
        }
        </script>
        
        <style>
        .checkout-audio-helper {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 9999;
        }
        
        .checkout-help-btn {
            background: #00a32a;
            color: white;
            border: none;
            padding: 15px 20px;
            border-radius: 30px;
            cursor: pointer;
            box-shadow: 0 4px 20px rgba(0,163,42,0.3);
            animation: pulse-green 3s infinite;
        }
        
        @keyframes pulse-green {
            0% { box-shadow: 0 0 0 0 rgba(0,163,42,0.4); }
            70% { box-shadow: 0 0 0 10px rgba(0,163,42,0); }
            100% { box-shadow: 0 0 0 0 rgba(0,163,42,0); }
        }
        </style>
        <?php
    }
}
add_action('wp_footer', 'ayudawp_checkout_audio_help');

Cómo aplicarlo:

  • Automático: Aparece en todas las páginas de pago.
  • Solo usuarios nuevos: Añade condición para usuarios sin pedidos previos.
  • Solo carritos grandes: Activa solo si el carrito supera cierto importe.
  • Personalizar mensaje: Modifica el texto según tu proceso de compra específico.

Tabla comparativa de métodos para tiendas online

Método Aplicación Automatización Costo Impacto conversión Implementación
BeyondWords productos Descripciones Alta 20 $/mes Medio Plugin WooCommerce
Audio comercial personalizado Presentación producto Media Gratis Alto functions.php
Ayuda en el pago Proceso compra Baja Gratis Medio Gancho de WooCommerce
ElevenLabs Premium Productos destacados Baja 22 $/mes Muy alto Desarrollo personalizado

Métodos avanzados con APIs externas

Para implementaciones profesionales con máxima calidad:

Integración con Google Cloud Text-to-Speech

Configuración paso a paso:

Paso 1: Configuración en Google Cloud

  1. Ve a Google Cloud Console.
  2. Crea nuevo proyecto o selecciona existente.
  3. Habilita la API de Text-to-Speech.
  4. Crea cuenta de servicio en IAM.
  5. Descarga archivo JSON de credenciales.

Paso 2: Configuración en servidor

# Instalar SDK de Google Cloud
composer require google/cloud-text-to-speech

# Subir archivo de credenciales a wp-content/uploads/
# Nombrar como: google-tts-credentials.json

Paso 3: Código de implementación (mejor como plugin especializado)

<?php
require_once ABSPATH . 'vendor/autoload.php';
use Google\Cloud\TextToSpeech\V1\TextToSpeechClient;
use Google\Cloud\TextToSpeech\V1\SynthesisInput;
use Google\Cloud\TextToSpeech\V1\VoiceSelectionParams;
use Google\Cloud\TextToSpeech\V1\AudioConfig;
use Google\Cloud\TextToSpeech\V1\AudioEncoding;

// Inicializar Google TTS
function ayudawp_init_google_tts() {
    $credentials_path = WP_CONTENT_DIR . '/uploads/google-tts-credentials.json';
    if (file_exists($credentials_path)) {
        putenv('GOOGLE_APPLICATION_CREDENTIALS=' . $credentials_path);
        return true;
    }
    return false;
}

// Generar audio con Google TTS
function ayudawp_google_tts_generate($text, $voice_name = 'es-ES-Wavenet-C') {
    if (!ayudawp_init_google_tts()) {
        return false;
    }
    
    try {
        $client = new TextToSpeechClient();
        
        $input = new SynthesisInput();
        $input->setText($text);
        
        $voice = new VoiceSelectionParams();
        $voice->setLanguageCode('es-ES');
        $voice->setName($voice_name);
        
        $audioConfig = new AudioConfig();
        $audioConfig->setAudioEncoding(AudioEncoding::MP3);
        $audioConfig->setSpeakingRate(0.9);
        $audioConfig->setPitch(0);
        
        $response = $client->synthesizeSpeech($input, $voice, $audioConfig);
        
        $upload_dir = wp_upload_dir();
        $filename = 'google_tts_' . md5($text . $voice_name) . '.mp3';
        $file_path = $upload_dir['path'] . '/' . $filename;
        
        file_put_contents($file_path, $response->getAudioContent());
        
        return $upload_dir['url'] . '/' . $filename;
        
    } catch (Exception $e) {
        error_log('Google TTS Error: ' . $e->getMessage());
        return false;
    }
}

// Shortcode para Google TTS
function ayudawp_google_tts_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'voice' => 'es-ES-Wavenet-C'
    ), $atts);
    
    if (empty($content)) return '';
    
    $audio_url = ayudawp_google_tts_generate($content, $atts['voice']);
    
    if ($audio_url) {
        return '<div class="google-tts-player">
            <audio controls preload="none" style="width:100%;">
                <source src="' . esc_url($audio_url) . '" type="audio/mpeg">
                Tu navegador no soporta audio HTML5.
            </audio>
            <p><small>Audio generado con Google Cloud Text-to-Speech</small></p>
        </div>';
    }
    
    return '<p>Error al generar audio con Google TTS.</p>';
}
add_shortcode('google_tts', 'ayudawp_google_tts_shortcode');
?>

Cómo aplicarlo:

  • En entradas: Usa [google_tts]Tu texto aquí[/google_tts]
  • Con voz específica: [google_tts voice="es-ES-Wavenet-B"]Texto[/google_tts]
  • En plantillas: <?php echo do_shortcode('[google_tts]' . get_the_content() . '[/google_tts]'); ?>
  • Para productos: Integra en el gancho de WooCommerce con el contenido del producto.

Integración con ElevenLabs

La mejor calidad disponible – Configuración paso a paso:

Paso 1: Cuenta en ElevenLabs

  1. Regístrate en ElevenLabs.io.
  2. Verifica tu email y accede al dashboard.
  3. Ve a «Profile → API Keys».
  4. Copia tu clave API.

Paso 2: Implementación en WordPress (mejor como plugin especializado)

<?php
// Configuración ElevenLabs
define('ELEVENLABS_API_KEY', 'tu-api-key-aquí');

function ayudawp_elevenlabs_generate($text, $voice_id = 'pNInz6obpgDQGcFmaJgB') {
    $url = 'https://api.elevenlabs.io/v1/text-to-speech/' . $voice_id;
    
    $data = array(
        'text' => $text,
        'model_id' => 'eleven_multilingual_v2',
        'voice_settings' => array(
            'stability' => 0.5,
            'similarity_boost' => 0.8,
            'style' => 0.2
        )
    );
    
    $response = wp_remote_post($url, array(
        'headers' => array(
            'Accept' => 'audio/mpeg',
            'Content-Type' => 'application/json',
            'xi-api-key' => ELEVENLABS_API_KEY
        ),
        'body' => json_encode($data),
        'timeout' => 60
    ));
    
    if (is_wp_error($response)) {
        return false;
    }
    
    $audio_data = wp_remote_retrieve_body($response);
    
    $upload_dir = wp_upload_dir();
    $filename = 'elevenlabs_' . md5($text . $voice_id) . '.mp3';
    $file_path = $upload_dir['path'] . '/' . $filename;
    
    file_put_contents($file_path, $audio_data);
    
    return $upload_dir['url'] . '/' . $filename;
}

// Metabox para posts con ElevenLabs
function ayudawp_add_elevenlabs_metabox() {
    add_meta_box(
        'ayudawp_elevenlabs',
        ' Audio Premium con ElevenLabs',
        'ayudawp_elevenlabs_metabox_content',
        'post'
    );
}
add_action('add_meta_boxes', 'ayudawp_add_elevenlabs_metabox');

function ayudawp_elevenlabs_metabox_content($post) {
    $enabled = get_post_meta($post->ID, '_elevenlabs_enabled', true);
    $voice_id = get_post_meta($post->ID, '_elevenlabs_voice', true) ?: 'pNInz6obpgDQGcFmaJgB';
    
    $voices = array(
        'pNInz6obpgDQGcFmaJgB' => 'Adam (Masculina)',
        '21m00Tcm4TlvDq8ikWAM' => 'Rachel (Femenina)',
        'AZnzlk1XvdvUeBnXmlld' => 'Domi (Femenina)',
        'EXAVITQu4vr4xnSDxMaL' => 'Bella (Femenina)'
    );
    
    echo '<label>
        <input type="checkbox" name="elevenlabs_enabled" value="1" ' . checked($enabled, '1', false) . '>
        Activar audio premium con ElevenLabs para este post
    </label><br><br>';
    
    echo '<label>Voz: 
        <select name="elevenlabs_voice">';
    foreach ($voices as $id => $name) {
        echo '<option value="' . $id . '" ' . selected($voice_id, $id, false) . '>' . $name . '</option>';
    }
    echo '</select>
    </label>';
}

// Guardar configuración
function ayudawp_save_elevenlabs_metabox($post_id) {
    if (isset($_POST['elevenlabs_enabled'])) {
        update_post_meta($post_id, '_elevenlabs_enabled', '1');
    } else {
        delete_post_meta($post_id, '_elevenlabs_enabled');
    }
    
    if (isset($_POST['elevenlabs_voice'])) {
        update_post_meta($post_id, '_elevenlabs_voice', sanitize_text_field($_POST['elevenlabs_voice']));
    }
}
add_action('save_post', 'ayudawp_save_elevenlabs_metabox');

// Mostrar player premium
function ayudawp_show_elevenlabs_player($content) {
    if (!is_single()) return $content;
    
    $post_id = get_the_ID();
    $enabled = get_post_meta($post_id, '_elevenlabs_enabled', true);
    
    if (!$enabled) return $content;
    
    $voice_id = get_post_meta($post_id, '_elevenlabs_voice', true);
    
    $premium_player = '
    <div class="elevenlabs-premium-player">
        <h4> Audio Premium con IA</h4>
        <p>Escucha este artículo con la mejor calidad de voz sintética disponible</p>
        <button onclick="ayudawp_generate_premium_audio(' . $post_id . ')" 
                class="premium-btn" id="premium-btn-' . $post_id . '">
            ✨ Generar Audio Premium
        </button>
        <div id="premium-container-' . $post_id . '" class="premium-container" style="display:none;">
            <div class="loading">Generando audio de máxima calidad...</div>
        </div>
    </div>
    
    <script>
    async function ayudawp_generate_premium_audio(postId) {
        const btn = document.getElementById("premium-btn-" + postId);
        const container = document.getElementById("premium-container-" + postId);
        
        btn.disabled = true;
        btn.innerText = "⏳ Generando...";
        container.style.display = "block";
        
        try {
            const response = await fetch("' . admin_url('admin-ajax.php') . '", {
                method: "POST",
                headers: {"Content-Type": "application/x-www-form-urlencoded"},
                body: `action=generate_elevenlabs_audio&post_id=${postId}&nonce=' . wp_create_nonce('elevenlabs_nonce') . '`
            });
            
            const data = await response.json();
            
            if (data.success) {
                container.innerHTML = `
                    <audio controls autoplay style="width:100%; margin-top:15px;">
                        <source src="${data.data.audio_url}" type="audio/mpeg">
                    </audio>
                    <p style="margin-top:10px; opacity:0.8;">
                        <small> Generado con ElevenLabs • Calidad Premium</small>
                    </p>`;
                btn.innerText = "✅ Audio Generado";
            } else {
                container.innerHTML = "<p style='color:#dc3545;'>❌ Error: " + data.data.message + "</p>";
                btn.disabled = false;
                btn.innerText = " Reintentar";
            }
        } catch (error) {
            container.innerHTML = "<p style='color:#dc3545;'>❌ Error de conexión</p>";
            btn.disabled = false;
            btn.innerText = " Reintentar";
        }
    }
    </script>
    
    <style>
    .elevenlabs-premium-player {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 25px;
        border-radius: 15px;
        margin: 25px 0;
        text-align: center;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }
    
    .elevenlabs-premium-player h4 {
        margin: 0 0 10px 0;
        font-size: 20px;
    }
    
    .elevenlabs-premium-player p {
        margin: 0 0 20px 0;
        opacity: 0.9;
    }
    
    .premium-btn {
        background: white;
        color: #333;
        border: none;
        padding: 15px 30px;
        border-radius: 50px;
        cursor: pointer;
        font-weight: bold;
        font-size: 16px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        transition: all 0.3s;
    }
    
    .premium-btn:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    }
    
    .premium-btn:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }
    
    .premium-container {
        margin-top: 20px;
        padding: 15px;
        background: rgba(255,255,255,0.1);
        border-radius: 10px;
    }
    
    .loading {
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }
    </style>';
    
    return $content . $premium_player;
}
add_filter('the_content', 'ayudawp_show_elevenlabs_player');

// AJAX handler para ElevenLabs
function ayudawp_handle_elevenlabs_ajax() {
    check_ajax_referer('elevenlabs_nonce', 'nonce');
    
    $post_id = intval($_POST['post_id']);
    $post = get_post($post_id);
    
    if (!$post) {
        wp_send_json_error(['message' => 'Post no encontrado']);
        return;
    }
    
    $voice_id = get_post_meta($post_id, '_elevenlabs_voice', true);
    $content = wp_strip_all_tags($post->post_content);
    
    // Limitar a 5000 caracteres para controlar costos
    if (strlen($content) > 5000) {
        $content = substr($content, 0, 5000) . '...';
    }
    
    $audio_url = ayudawp_elevenlabs_generate($content, $voice_id);
    
    if ($audio_url) {
        wp_send_json_success(['audio_url' => $audio_url]);
    } else {
        wp_send_json_error(['message' => 'Error al generar audio']);
    }
}
add_action('wp_ajax_generate_elevenlabs_audio', 'ayudawp_handle_elevenlabs_ajax');
add_action('wp_ajax_nopriv_generate_elevenlabs_audio', 'ayudawp_handle_elevenlabs_ajax');
?>

Cómo aplicarlo:

  • Por entrada: Activa en la caja meta de cada entrada que quieras audio premium.
  • Automático premium: Modifica el filtro para activar automáticamente en entradas de categorías específicas.
  • Solo entradas largas: Añade una condición de longitud mínima del contenido.
  • Para productos premium: Intégralo con WooCommerce para productos de alta gama.

Sistema de cache inteligente

Para optimizar coste de APIs externas (mejor como plugin especializado):

<?php
// Sistema de cache para audios generados
class AyudaWP_Audio_Cache {
    private static $cache_duration = 30 * DAY_IN_SECONDS;
    public static function get_cached_audio($text, $service, $voice_id = '') {
        $cache_key = 'ayudawp_audio_' . md5($text . $service . $voice_id);
        $cached_data = get_transient($cache_key);
        if ($cached_data && file_exists(self::get_full_path($cached_data['filename']))) {
            return $cached_data['url'];
        }
        return false;
    }
    
    public static function cache_audio($text, $service, $voice_id, $audio_url) {
        $cache_key = 'ayudawp_audio_' . md5($text . $service . $voice_id);
        $filename = basename(parse_url($audio_url, PHP_URL_PATH));
        $cached_data = array(
            'url' => $audio_url,
            'filename' => $filename,
            'service' => $service,
            'created' => time()
        );
        set_transient($cache_key, $cached_data, self::$cache_duration);
        return $audio_url;
    }
    
    public static function clean_old_cache() {
        $upload_dir = wp_upload_dir();
        $patterns = array(
            $upload_dir['path'] . '/google_tts_*.mp3',
            $upload_dir['path'] . '/elevenlabs_*.mp3',
            $upload_dir['path'] . '/polly_*.mp3'
        );
        foreach ($patterns as $pattern) {
            $files = glob($pattern);
            foreach ($files as $file) {
                if (filemtime($file) < (time() - self::$cache_duration)) {
                    unlink($file);
                }
            }
        }
    }
    private static function get_full_path($filename) {
        $upload_dir = wp_upload_dir();
        return $upload_dir['path'] . '/' . $filename;
    }
}

// Programar limpieza automática
function ayudawp_schedule_audio_cleanup() {
    if (!wp_next_scheduled('ayudawp_clean_audio_cache')) {
        wp_schedule_event(time(), 'daily', 'ayudawp_clean_audio_cache');
    }
}
add_action('wp', 'ayudawp_schedule_audio_cleanup');
add_action('ayudawp_clean_audio_cache', array('AyudaWP_Audio_Cache', 'clean_old_cache'));

// Función universal con cache
function ayudawp_generate_audio_with_cache($text, $service, $voice_id = '') {
    // Buscar en cache primero
    $cached_url = AyudaWP_Audio_Cache::get_cached_audio($text, $service, $voice_id);
    if ($cached_url) {
        return $cached_url;
    }
    $audio_url = false;
    
    // Generar según servicio
    switch ($service) {
        case 'google':
            $audio_url = ayudawp_google_tts_generate($text, $voice_id);
            break;
        case 'elevenlabs':
            $audio_url = ayudawp_elevenlabs_generate($text, $voice_id);
            break;
    }
    
    // Guardar en cache
    if ($audio_url) {
        AyudaWP_Audio_Cache::cache_audio($text, $service, $voice_id, $audio_url);
    }
    return $audio_url;
}
?>

Cómo aplicarlo:

  • Reemplazar funciones: Usa ayudawp_generate_audio_with_cache() en lugar de las funciones directas.
  • Control de costos: El cache evita regenerar audios ya creados.
  • Limpieza automática: Se ejecuta diariamente para liberar espacio.
  • Monitoreo: Añade logs para controlar el uso de APIs.

Tabla de comparativa de servicios premium/APIs externas

Servicio Precio base Precio/1 millón caracteres Calidad Instalación Uso recomendado
Google Cloud TTS Gratis inicio 4 $ ★★★★☆ Media Desarrollo personalizado
ElevenLabs 5 $/mes aprox. 150 $ ★★★★★ Media Premium/lujo
Amazon Polly Gratis inicio 4 $ ★★★★☆ Media Aplicaciones pro
Microsoft Azure Gratis inicio 4 $ ★★★★★ Media Empresarial

Comparativa completa de servicios y (mis) recomendaciones

Solución Calidad Coste mensual estimado Facilidad instalación Automatización Mejor para
Trinity Audio ★★★★☆ Gratis/Premium ★★★★☆ ★★★★★ Medios y webs de noticias
GSpeech ★★★☆☆ Gratis/Premium ★★★★☆ ★★★☆☆ Webs medianas flexibles
BeyondWords ★★★★☆ 20 $ ★★★★☆ ★★★★★ Webs corporativas
Google Cloud TTS ★★★★☆ Variable (4 $/1M) ★★☆☆☆ ★★★★☆ Desarrollo profesional
ElevenLabs ★★★★★ 22 $ ★★☆☆☆ ★★★☆☆ Contenido premium/luxury
Código personalizado ★★☆☆☆ Gratis ★☆☆☆☆ ★★★★☆ Control total/developers

Recomendaciones por tipo de web

Blog personal (menos de 10.000 visitas/mes):

  • Mejor opción: Trinity Audio (gratuito).
  • Alternativa: GSpeech.

Web corporativa (10.000-100.000 visitas/mes):

  • Mejor opción: BeyondWords con plan Starter.
  • Alternativa: Google Cloud TTS con desarrollo personalizado.

Ecommerce mediano (menos de 50.000 productos):

  • Mejor opción: Trinity Audio para contenido + código personalizado para productos.
  • Premium: BeyondWords + ElevenLabs para productos destacados.

Ecommerce grande (menos de 50.000 productos):

  • Mejor opción: Google Cloud TTS con cache inteligente.
  • Luxury: ElevenLabs para productos premium solamente.

Medio de comunicación:

  • Mejor opción: Trinity Audio (diseñado específicamente para medios).
  • Alternativa: BeyondWords con plan Creator.

Consejos finales para maximizar resultados

Optimización técnica

  • Divide textos largos: Artículos de más de 1000 palabras divídelos en secciones.
  • Usa puntuación adecuada: Ayuda a que las pausas suenen naturales.
  • Evita abreviaciones: Escribe «número» en lugar de «nº».
  • Prueba velocidades: 0.8-0.9 suele ser lo más cómodo en español.

Mejores prácticas UX

  • Posición estratégica: Coloca el reproductor al inicio de la entrada o producto, que no haya que buscarlo.
  • Feedback visual: Indica claramente cuando el audio está reproduciéndose.
  • Control de usuario: Siempre incluir los controles del reproductor.
  • Responsive: Asegúrate de que funciona bien en móviles.
  • Discreción: No uses la reproducción automática (puede molestar) salvo que esté totalmente justificado (productos).
  • Rendimiento: Optimiza los MP3 para no ralentizar la web.
  • Accesibilidad: Usa texto alternativo, como por ejemplo «Escuchar este artículo».
  • Personalización: Plantéate usar voces distintas para categorías o tipos de contenido.

Medición y analítica

Eventos de Google Analytics:

// Añadir a tus funciones de audio
gtag('event', 'audio_play', {
  'event_category': 'TTS',
  'event_label': 'Article Audio',
  'value': 1
});

Métricas importantes:

  • Porcentaje de usuarios que usan TTS
  • Tiempo de permanencia en página con/sin TTS
  • Tasa de rebote comparativa
  • Conversiones en ecommerce con productos con audio

Compatibilidad y problemillas

  • Detección de compatibilidad: Comprueba que todos los navegadores navegador admitan el TTS.
  • Mensajes de error: Informa al usuario si algo falla.
  • Alternativas: Ten siempre una opción gratuita como respaldo de las de pago.

Gestión de costes para servicios premium

  • Límites por entrada: Máximo 5.000 caracteres para controlar gastos.
  • Cache inteligente: Implementa un sistema de caché para evitar regenerar los mismos audios en cada visita.
  • Monitorización: Revisa el uso mensual y configura alertas.
  • Combinado: Usa servicios premium solo para contenido destacado, el resto servicios gratuitos o sin voz.

¿Qué hago entonces, añado texto a voz o no?

El texto a voz con las IAs actuales es una de esas mejoras que aportan valor inmediato a cualquier web en WordPress:

  • Más accesible, más cómodo y más atractivo.
  • Fácil de implementar con plugins, o flexible con servicios de IA mediante API.
  • Ideal tanto para blogs como para tiendas online.

Vamos, que no le encuentro pegas, salvo las dudas normales de cómo implantarlo (plugin, código, API, etc.), pero en realidad no hay ninguna excusa razonable para no ponerle voz a una web.

Con esta guía completa creo que tienes todas las herramientas necesarias para implementar esto del TTS en tu WordPress, desde opciones gratuitas hasta las más avanzadas, con ejemplos prácticos y explicaciones detalladas de cómo aplicar cada método.

El audio va a ser una ventaja competitiva importante en los próximos años, así que ¡empieza ya y posiciónate por delante de tu competencia!

Resume el artículo con tu IA favorita o compártelo en redes

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en las estrellas para valorarlo!

Promedio de puntuación 5 / 5. Total de votos: 7

¡Todavía no hay votos! Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en las redes sociales!

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!



Sobre el autor

Scroll al inicio