Changeset 3778385

Timestamp:

11/01/2026 06:10:22 PM (2 hours ago)

Author:

auvrenthstudio

Message:

new version release 1.0.0

Location:

auvrenth-text-to-speech-reader

Files:

• assets/screenshot-1.png (added)
• assets/screenshot-2.png (added)
• assets/screenshot-3.png (added)
• assets/screenshot-4.png (added)
• assets/screenshot-5.png (added)
• assets/screenshot-6.png (added)
• tags/1.0.0 (added)
• tags/1.0.0/assets (added)
• tags/1.0.0/assets/css (added)
• tags/1.0.0/assets/css/player.css (added)
• tags/1.0.0/assets/images (added)
• tags/1.0.0/assets/images/menu-icon.svg (added)
• tags/1.0.0/assets/js (added)
• tags/1.0.0/assets/js/admin.js (added)
• tags/1.0.0/assets/js/player.js (added)
• tags/1.0.0/assets/js/voices.js (added)
• tags/1.0.0/auvrenth-text-to-speech-reader.php (added)
• tags/1.0.0/blocks (added)
• tags/1.0.0/blocks/player (added)
• tags/1.0.0/blocks/player/block.json (added)
• tags/1.0.0/blocks/player/index.asset.php (added)
• tags/1.0.0/blocks/player/index.js (added)
• tags/1.0.0/includes (added)
• tags/1.0.0/includes/MetaBox.php (added)
• tags/1.0.0/includes/Player.php (added)
• tags/1.0.0/includes/Plugin.php (added)
• tags/1.0.0/includes/Settings.php (added)
• tags/1.0.0/includes/autoload.php (added)
• tags/1.0.0/readme.txt (added)
• tags/1.0.0/uninstall.php (added)
• trunk/assets/css/player.css (modified) (6 diffs)
• trunk/assets/js/admin.js (modified) (3 diffs)
• trunk/assets/js/player.js (modified) (18 diffs)
• trunk/auvrenth-text-to-speech-reader.php (modified) (2 diffs)
• trunk/blocks (added)
• trunk/blocks/player (added)
• trunk/blocks/player/block.json (added)
• trunk/blocks/player/index.asset.php (added)
• trunk/blocks/player/index.js (added)
• trunk/includes/Player.php (modified) (14 diffs)
• trunk/includes/Settings.php (modified) (8 diffs)
• trunk/readme.txt (modified) (4 diffs)

auvrenth-text-to-speech-reader/trunk/assets/css/player.css

@@ -8 +8 @@
         --auvrenth-tts-border: rgba(127, 127, 127, 0.24);
         --auvrenth-tts-hover: rgba(127, 127, 127, 0.12);
+        --auvrenth-tts-floating-bg: Canvas;
+        --auvrenth-tts-floating-text: CanvasText;
 
         box-sizing: border-box;
@@ -84 +86 @@
         color: var(--auvrenth-tts-accent-text) !important;
         box-shadow: 0 2px 8px rgba(30, 64, 175, 0.25) !important;
+        /* Follows the chosen color where the browser can mix colors; the line above is the fallback. */
+        box-shadow: 0 2px 8px color-mix(in srgb, var(--auvrenth-tts-accent) 30%, transparent) !important;
 }
 
@@ -149 +153 @@
 }
 
-.auvrenth-tts[data-state="idle"] .auvrenth-tts__stop {
+.auvrenth-tts[data-state="idle"] .auvrenth-tts__prev,
+.auvrenth-tts[data-state="idle"] .auvrenth-tts__stop,
+.auvrenth-tts[data-state="idle"] .auvrenth-tts__next {
         display: none;
+}
+
+/* Stopped or paused: the Stop button gives its place to a Resume button. */
+.auvrenth-tts .auvrenth-tts__resume,
+.auvrenth-tts[data-state="paused"] .auvrenth-tts__stop {
+        display: none;
+}
+
+.auvrenth-tts[data-state="paused"] .auvrenth-tts__resume {
+        display: inline-flex;
+        color: var(--auvrenth-tts-accent);
+}
+
+/* Skip icons point the reading direction. */
+[dir="rtl"] .auvrenth-tts__prev svg,
+[dir="rtl"] .auvrenth-tts__next svg {
+        transform: scaleX(-1);
 }
 
@@ -201 +224 @@
 }
 
-/* Reading progress along the bottom edge */
+/* Spans the whole panel under the lists. */
+.auvrenth-tts__note {
+        grid-column: 1 / -1;
+        margin: 0;
+        font-size: 0.8125em;
+        opacity: 0.68;
+}
+
+/* Reading progress along the bottom edge; click to jump to a sentence. */
 .auvrenth-tts__progress {
+        position: relative;
         height: 3px;
         background: var(--auvrenth-tts-hover);
+        cursor: pointer;
+}
+
+/* A taller hit area than the 3px bar itself. */
+.auvrenth-tts__progress::before {
+        content: "";
+        position: absolute;
+        inset: -8px 0 0;
 }
 
@@ -215 +255 @@
 }
 
+/* The block editor's picture of the player: looks like the real one, but clicks select the block. */
+.auvrenth-tts--preview {
+        margin-bottom: 0;
+        pointer-events: none;
+}
+
+/* Mini player pinned to the bottom of the screen once the original scrolls out of view. */
+.auvrenth-tts--floating {
+        position: fixed;
+        z-index: 99999;
+        bottom: 16px;
+        left: 50%;
+        width: min(560px, calc(100% - 32px));
+        margin: 0;
+        transform: translateX(-50%);
+        background: var(--auvrenth-tts-floating-bg);
+        color: var(--auvrenth-tts-floating-text);
+        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
+}
+
+/* The sentence being read. Themes can set --auvrenth-tts-highlight on the content. */
+::highlight(auvrenth-tts) {
+        background-color: var(--auvrenth-tts-highlight, rgba(59, 130, 246, 0.25));
+}
+
 @media (max-width: 480px) {
         .auvrenth-tts__bar {
@@ -225 +290 @@
                 height: 42px;
         }
+
+        .auvrenth-tts__actions button {
+                min-width: 32px;
+        }
+
+        .auvrenth-tts--floating {
+                bottom: 12px;
+                width: calc(100% - 24px);
+        }
 }
 

auvrenth-text-to-speech-reader/trunk/assets/js/admin.js

@@ -4 +4 @@
 ( function () {
         'use strict';
+
+        // WordPress's own color picker for the play button color.
+        if ( window.jQuery && window.jQuery.fn.wpColorPicker ) {
+                window.jQuery( '.auvrenth-tts-color-field' ).wpColorPicker();
+        }
 
         const V = window.auvrenthTtsVoices;
@@ -11 +16 @@
         const test = document.getElementById( 'auvrenth-tts-test-voice' );
         const note = document.getElementById( 'auvrenth-tts-voice-note' );
+        const rate = document.getElementById( 'auvrenth-tts-rate' );
+        const pitch = document.getElementById( 'auvrenth-tts-pitch' );
 
         if ( ! language || ! voice ) {
@@ -54 +61 @@
                 const picked = V.pick( language.value || siteLanguage, voice.value );
                 const utterance = new window.SpeechSynthesisUtterance( l10n.sample || 'Hello' );
+                // Preview with the speed and pitch currently in the form, saved or not.
+                utterance.rate = parseFloat( rate && rate.value ) || 1;
+                utterance.pitch = parseFloat( pitch && pitch.value ) || 1;
                 if ( picked ) {
                         utterance.voice = picked;

auvrenth-text-to-speech-reader/trunk/assets/js/player.js

@@ -2 +2 @@
  * Auvrenth Text-to-Speech Reader player: reads the post aloud with the browser's speech synthesis.
  *
- * Text is spoken in short chunks because Chrome silently stops long utterances
- * after about 15 seconds. Pausing cancels speech and resuming restarts the
- * current chunk, which behaves the same in every browser unlike pause().
+ * Text is spoken one sentence at a time because Chrome silently stops long
+ * utterances after about 15 seconds, and sentences give natural points for
+ * highlighting and skipping. Pausing cancels speech and resuming starts again
+ * from the last word the voice reported, which behaves the same in every
+ * browser unlike pause().
  */
 ( function () {
@@ -16 +18 @@
         const synth = window.speechSynthesis;
         const l10n = window.auvrenthTtsL10n || {};
-        const MAX_CHUNK = 220;
+        const MAX_SEGMENT = 220;
         const STORE_KEY = 'auvrenthTtsVoice';
+        const HIGHLIGHT = 'auvrenth-tts';
+        const canHighlight = !! ( window.CSS && window.CSS.highlights && window.Highlight );
+        // Letters, marks and digits only, so curly quotes, dashes and spacing that WordPress adds never break a match.
+        const WORD_CHAR = /[\p{L}\p{M}\p{N}]/u;
+        // Roughly how many characters a browser voice reads per second at 1× speed.
+        const CHARS_PER_SECOND = 14;
+        // Auto-scroll steps aside for this long after the visitor scrolls, so it never fights their hand.
+        const USER_SCROLL_PAUSE = 4000;
+        let lastInput = -USER_SCROLL_PAUSE;
         let active = null;
 
-        // The visitor's last language and voice choice. Storage can be blocked, so never rely on it.
+        // The visitor's last language and voice. Storage can be blocked, so never rely on it.
         function readChoice() {
                 try {
@@ -29 +40 @@
         }
 
-        function saveChoice( choice ) {
+        function saveChoice( changes ) {
                 try {
-                        window.localStorage.setItem( STORE_KEY, JSON.stringify( choice ) );
+                        window.localStorage.setItem( STORE_KEY, JSON.stringify( Object.assign( readChoice(), changes ) ) );
                 } catch ( e ) {}
         }
@@ -38 +49 @@
                 const parts = [];
                 let rest = sentence;
-                while ( rest.length > MAX_CHUNK ) {
-                        let cut = rest.lastIndexOf( ',', MAX_CHUNK );
-                        if ( cut < MAX_CHUNK / 2 ) {
-                                cut = rest.lastIndexOf( ' ', MAX_CHUNK );
+                while ( rest.length > MAX_SEGMENT ) {
+                        let cut = rest.lastIndexOf( ',', MAX_SEGMENT );
+                        if ( cut < MAX_SEGMENT / 2 ) {
+                                cut = rest.lastIndexOf( ' ', MAX_SEGMENT );
                         }
                         if ( cut <= 0 ) {
-                                cut = MAX_CHUNK;
+                                cut = MAX_SEGMENT;
                         }
                         parts.push( rest.slice( 0, cut + 1 ).trim() );
@@ -54 +65 @@
         }
 
-        function chunk( text ) {
-                const sentences = text.match( /[^.!?।]+[.!?।]*\s*/g ) || [];
-                const chunks = [];
-                let current = '';
-
-                sentences.forEach( ( sentence ) => {
-                        splitLong( sentence ).forEach( ( piece ) => {
-                                if ( current && current.length + piece.length + 1 > MAX_CHUNK ) {
-                                        chunks.push( current );
-                                        current = '';
-                                }
-                                current = current ? current + ' ' + piece : piece;
+        // Line breaks separate blocks such as headings and list items; sentences end at punctuation followed by a space.
+        function segments( text ) {
+                const list = [];
+                text.split( /\n+/ ).forEach( ( line ) => {
+                        line.split( /(?<=[.!?।])\s+/ ).forEach( ( sentence ) => {
+                                splitLong( sentence.trim() ).forEach( ( piece ) => {
+                                        if ( piece ) {
+                                                list.push( piece );
+                                        }
+                                } );
                         } );
                 } );
-                if ( current ) {
-                        chunks.push( current );
-                }
-
-                return chunks.filter( Boolean );
-        }
-
-        // Roughly how many characters a browser voice reads per second at 1× speed.
-        const CHARS_PER_SECOND = 14;
+
+                return list;
+        }
+
+        function fold( ch ) {
+                const lower = ch.toLowerCase();
+
+                return lower.length === 1 ? lower : ch;
+        }
+
+        function keyOf( text ) {
+                let key = '';
+                for ( const ch of text ) {
+                        if ( ch.length === 1 && WORD_CHAR.test( ch ) ) {
+                                key += fold( ch );
+                        }
+                }
+
+                return key;
+        }
+
+        // Every letter on the page with the text node it came from, so a sentence can be turned into a DOM range.
+        function indexText( root ) {
+                const walker = document.createTreeWalker( root, window.NodeFilter.SHOW_TEXT, {
+                        acceptNode: ( node ) =>
+                                node.parentElement && ! node.parentElement.closest( 'script, style, noscript, textarea, .auvrenth-tts' )
+                                        ? window.NodeFilter.FILTER_ACCEPT
+                                        : window.NodeFilter.FILTER_REJECT,
+                } );
+                const index = { chars: '', nodes: [], offsets: [] };
+
+                for ( let node = walker.nextNode(); node; node = walker.nextNode() ) {
+                        const value = node.nodeValue;
+                        for ( let i = 0; i < value.length; i++ ) {
+                                if ( WORD_CHAR.test( value[ i ] ) ) {
+                                        index.chars += fold( value[ i ] );
+                                        index.nodes.push( node );
+                                        index.offsets.push( i );
+                                }
+                        }
+                }
+
+                return index;
+        }
+
+        // Finds each sentence on the page in reading order. Sentences that are not on the page (the title when the
+        // theme shows it elsewhere, or text changed by a filter) get no range and simply are not highlighted.
+        function locate( index, list ) {
+                const ranges = [];
+                let cursor = 0;
+                let previous = null; // The last match: which segment, where its search began and where it was found.
+
+                // A short sentence found far ahead is more likely a repeat than the real one.
+                const find = ( key, from ) => {
+                        const at = index.chars.indexOf( key, from );
+
+                        return at < 0 || ( at - from > 2000 && key.length < 24 ) ? -1 : at;
+                };
+
+                list.forEach( ( text, i ) => {
+                        const key = keyOf( text );
+                        let from = cursor;
+                        let at = key ? find( key, from ) : -1;
+                        // A short segment such as the title can match words inside the next sentence ("about summer scarves")
+                        // and push the search past it. When a segment is missing, look again from before that match and,
+                        // if this segment overlaps it, the earlier match was wrong.
+                        if ( key && at < 0 && previous ) {
+                                const retry = find( key, previous.from );
+                                if ( retry >= 0 && retry < previous.at + previous.length ) {
+                                        ranges[ previous.i ] = null;
+                                        from = previous.from;
+                                        at = retry;
+                                }
+                        }
+                        if ( at < 0 ) {
+                                ranges.push( null );
+                                return;
+                        }
+                        const last = at + key.length - 1;
+                        const range = document.createRange();
+                        range.setStart( index.nodes[ at ], index.offsets[ at ] );
+                        range.setEnd( index.nodes[ last ], index.offsets[ last ] + 1 );
+                        ranges.push( range );
+                        previous = { i, from, at, length: key.length };
+                        cursor = at + key.length;
+                } );
+
+                return ranges;
+        }
+
+        function highlight( range ) {
+                if ( ! canHighlight ) {
+                        return;
+                }
+                if ( range ) {
+                        window.CSS.highlights.set( HIGHLIGHT, new window.Highlight( range ) );
+                } else {
+                        window.CSS.highlights.delete( HIGHLIGHT );
+                }
+        }
 
         function fillSelect( select, options, value ) {
@@ -90 +190 @@
         function voiceLabel( voice ) {
                 return voice.name.split( ' - ' )[ 0 ];
+        }
+
+        function clamp( value, min, max, fallback ) {
+                value = parseFloat( value );
+
+                return Number.isFinite( value ) ? Math.min( max, Math.max( min, value ) ) : fallback;
         }
 
@@ -97 +203 @@
                         this.toggle = el.querySelector( '.auvrenth-tts__toggle' );
                         this.meta = el.querySelector( '.auvrenth-tts__meta' );
+                        this.prevButton = el.querySelector( '.auvrenth-tts__prev' );
+                        this.nextButton = el.querySelector( '.auvrenth-tts__next' );
                         this.stopButton = el.querySelector( '.auvrenth-tts__stop' );
+                        this.resumeButton = el.querySelector( '.auvrenth-tts__resume' );
                         this.speedButton = el.querySelector( '.auvrenth-tts__speed' );
                         this.settingsButton = el.querySelector( '.auvrenth-tts__settings' );
@@ -103 +212 @@
                         this.languageField = el.querySelector( '.auvrenth-tts__language' );
                         this.voiceField = el.querySelector( '.auvrenth-tts__voice' );
-                        this.progress = el.querySelector( '.auvrenth-tts__progress span' );
-                        this.chunks = chunk( el.dataset.text || '' );
+                        this.bar = el.querySelector( '.auvrenth-tts__progress' );
+                        this.progress = this.bar.querySelector( 'span' );
+                        this.segments = segments( el.dataset.text || '' );
+                        // Character offset where each segment starts, so progress follows the text rather than the sentence count.
+                        this.offsets = [];
+                        this.total = this.segments.reduce( ( sum, s ) => {
+                                this.offsets.push( sum );
+                                return sum + s.length;
+                        }, 0 );
+
                         this.speeds = JSON.parse( el.dataset.speeds || '[1]' ).map( Number );
                         this.rate = parseFloat( el.dataset.rate ) || 1;
+                        // Set by the site owner only; volume is left to the visitor's device, which every voice respects.
+                        this.pitch = clamp( el.dataset.pitch, 0.5, 2, 1 );
+                        this.useHighlight = canHighlight && el.dataset.highlight === '1';
+                        this.autoscroll = el.dataset.autoscroll === '1';
+                        this.ranges = null;
                         this.index = 0;
+                        this.offset = 0; // Where speech (re)starts inside the current segment.
+                        this.boundary = -1; // Last word position the voice reported, or -1.
+                        this.started = 0;
                         this.state = 'idle';
+                        this.stopped = false;
                         this.token = 0;
+                        this.ticker = null;
+                        this.anchor = null;
                         this.locale = '';
                         this.voiceName = '';
 
-                        if ( ! this.chunks.length ) {
+                        if ( ! this.segments.length ) {
                                 return;
                         }
 
                         this.toggle.addEventListener( 'click', () => this.onToggle() );
+                        this.prevButton.addEventListener( 'click', () => this.skip( -1 ) );
+                        this.nextButton.addEventListener( 'click', () => this.skip( 1 ) );
                         this.stopButton.addEventListener( 'click', () => this.stop() );
+                        this.resumeButton.addEventListener( 'click', () => this.play() );
                         this.speedButton.addEventListener( 'click', () => this.nextSpeed() );
+                        this.bar.addEventListener( 'click', ( e ) => this.seek( e ) );
+                        el.addEventListener( 'keydown', ( e ) => this.onKey( e ) );
                         if ( this.panel ) {
                                 this.settingsButton.addEventListener( 'click', () => this.togglePanel() );
-                                this.panel.addEventListener( 'keydown', ( e ) => {
-                                        if ( e.key === 'Escape' ) {
-                                                this.togglePanel( false );
-                                                this.settingsButton.focus();
-                                        }
-                                } );
                                 this.languageField.querySelector( 'select' ).addEventListener( 'change', ( e ) => this.onLanguageChange( e.target.value ) );
                                 this.voiceField.querySelector( 'select' ).addEventListener( 'change', ( e ) => this.onVoiceChange( e.target.value ) );
                         }
+                        if ( el.dataset.sticky === '1' ) {
+                                this.watchScroll();
+                        }
                         this.render();
                         el.hidden = false;
+                }
+
+                onKey( e ) {
+                        if ( e.key === 'Escape' && this.panel && ! this.panel.hidden ) {
+                                this.togglePanel( false );
+                                this.settingsButton.focus();
+                                return;
+                        }
+                        // Arrow keys belong to the lists in the panel.
+                        if ( this.state === 'idle' || e.target.closest( 'select' ) ) {
+                                return;
+                        }
+                        if ( e.key === 'ArrowLeft' || e.key === 'ArrowRight' ) {
+                                e.preventDefault();
+                                const forward = ( e.key === 'ArrowRight' ) !== ( window.getComputedStyle( this.el ).direction === 'rtl' );
+                                this.skip( forward ? 1 : -1 );
+                        }
                 }
 
@@ -145 +292 @@
                         this.panel.hidden = ! open;
                         this.settingsButton.setAttribute( 'aria-expanded', String( open ) );
-                }
-
-                minutesFrom( index ) {
-                        const chars = this.chunks.slice( index ).reduce( ( sum, c ) => sum + c.length, 0 );
-
-                        return Math.max( 1, Math.round( chars / ( CHARS_PER_SECOND * this.rate ) / 60 ) );
                 }
 
@@ -211 +352 @@
                 }
 
+                // Where to start again in the current segment: the last word the voice reached, if it reports words.
+                resumePoint() {
+                        return this.boundary >= 0 ? this.boundary : this.offset;
+                }
+
                 restartIfPlaying() {
                         if ( this.state === 'playing' ) {
-                                this.speakFrom( this.index );
+                                this.speakFrom( this.index, this.resumePoint() );
                         }
                 }
@@ -223 +369 @@
                         active = this;
                         this.state = 'playing';
-                        this.render();
-                        this.speakFrom( this.index );
+                        this.stopped = false;
+                        this.speakFrom( this.index, this.offset );
                 }
 
                 pause() {
+                        this.offset = this.resumePoint();
                         this.cancel();
                         this.state = 'paused';
@@ -233 +380 @@
                 }
 
+                // Stops where it is: the main button turns into Resume and carries on from the same word.
                 stop() {
-                        this.cancel();
-                        this.reset();
+                        const hadFocus = this.el.contains( document.activeElement );
+                        this.pause();
+                        this.stopped = true;
+                        this.render();
+                        // The Stop button is replaced by Resume, so keep keyboard focus in the same place.
+                        if ( hadFocus ) {
+                                this.resumeButton.focus();
+                        }
                 }
 
                 reset() {
-                        this.index = 0;
-                        this.state = 'idle';
                         if ( active === this ) {
                                 active = null;
-                        }
+                                highlight( null );
+                        }
+                        this.index = 0;
+                        this.offset = 0;
+                        this.boundary = -1;
+                        this.state = 'idle';
+                        this.stopped = false;
                         this.render();
+                }
+
+                skip( delta ) {
+                        this.goTo( Math.min( Math.max( this.index + delta, 0 ), this.segments.length - 1 ) );
+                }
+
+                // Clicking the progress bar jumps to the sentence under the pointer.
+                seek( e ) {
+                        const rect = this.bar.getBoundingClientRect();
+                        const rtl = window.getComputedStyle( this.bar ).direction === 'rtl';
+                        const fraction = ( rtl ? rect.right - e.clientX : e.clientX - rect.left ) / rect.width;
+                        const target = fraction * this.total;
+                        const index = this.offsets.findIndex( ( start, i ) => target < start + this.segments[ i ].length );
+
+                        this.goTo( index < 0 ? this.segments.length - 1 : index );
+                }
+
+                goTo( index ) {
+                        if ( this.state === 'playing' ) {
+                                this.speakFrom( index );
+                                return;
+                        }
+                        this.index = index;
+                        this.offset = 0;
+                        this.boundary = -1;
+                        if ( this.state === 'idle' ) {
+                                this.play();
+                        } else {
+                                this.render();
+                        }
                 }
 
@@ -252 +440 @@
                 }
 
-                speakFrom( index ) {
+                speakFrom( index, offset = 0 ) {
                         this.cancel();
-                        if ( index >= this.chunks.length ) {
+                        if ( index >= this.segments.length ) {
                                 this.reset();
                                 return;
@@ -260 +448 @@
 
                         this.index = index;
+                        this.offset = offset;
+                        this.boundary = -1;
+                        this.started = 0;
                         this.render();
                         const token = this.token;
-                        const utterance = new window.SpeechSynthesisUtterance( this.chunks[ index ] );
+                        const utterance = new window.SpeechSynthesisUtterance( this.segments[ index ].slice( offset ) );
                         const voice = this.currentVoice();
 
                         utterance.rate = this.rate;
+                        utterance.pitch = this.pitch;
                         if ( voice ) {
                                 utterance.voice = voice;
@@ -272 +464 @@
                                 utterance.lang = document.documentElement.lang;
                         }
+                        utterance.onstart = () => {
+                                if ( token === this.token ) {
+                                        this.started = window.performance.now();
+                                }
+                        };
+                        // Word positions, where the voice reports them (many network voices do not).
+                        utterance.onboundary = ( event ) => {
+                                if ( token === this.token ) {
+                                        this.boundary = offset + event.charIndex;
+                                        this.updateProgress();
+                                }
+                        };
                         utterance.onend = () => {
                                 if ( token === this.token ) {
@@ -286 +490 @@
                 }
 
+                // Characters already read in the current segment: the voice's word position when it reports one,
+                // otherwise an estimate from the time spoken, never past the end of the segment.
+                spoken() {
+                        const length = this.segments[ this.index ].length;
+                        if ( this.state !== 'playing' ) {
+                                return this.offset;
+                        }
+                        if ( this.boundary >= 0 ) {
+                                return Math.min( length, this.boundary );
+                        }
+                        if ( ! this.started ) {
+                                return this.offset;
+                        }
+                        const elapsed = ( window.performance.now() - this.started ) / 1000;
+
+                        return Math.min( length, this.offset + elapsed * CHARS_PER_SECOND * this.rate );
+                }
+
+                read() {
+                        return this.state === 'idle' ? 0 : this.offsets[ this.index ] + this.spoken();
+                }
+
+                updateProgress() {
+                        this.progress.style.width = ( this.read() / this.total ) * 100 + '%';
+                }
+
+                // Marks the sentence being read and, when asked, scrolls the page so it stays in view.
+                showHighlight() {
+                        if ( ! ( this.useHighlight || this.autoscroll ) || this.state === 'idle' ) {
+                                return;
+                        }
+                        if ( ! this.ranges ) {
+                                const root = this.el.closest( '.entry-content, .wp-block-post-content, .post-content, article, main' ) || this.el.parentElement;
+                                this.ranges = locate( indexText( root ), this.segments );
+                        }
+                        const range = this.ranges[ this.index ];
+                        if ( this.useHighlight ) {
+                                highlight( range );
+                        }
+                        if ( this.autoscroll && this.state === 'playing' && range ) {
+                                this.follow( range );
+                        }
+                }
+
+                // Scrolls only when the sentence has left the screen, and not while the visitor is scrolling themselves.
+                follow( range ) {
+                        if ( window.performance.now() - lastInput < USER_SCROLL_PAUSE ) {
+                                return;
+                        }
+                        const rect = range.getBoundingClientRect();
+                        if ( ! rect.width && ! rect.height ) {
+                                return; // Hidden text has no place on the page.
+                        }
+                        // Leave room for the mini player pinned to the bottom edge.
+                        const bottomGap = this.anchor ? this.el.offsetHeight + 48 : 48;
+                        if ( rect.top >= 48 && rect.bottom <= window.innerHeight - bottomGap ) {
+                                return;
+                        }
+                        const calm = window.matchMedia && window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches;
+                        window.scrollBy( { top: rect.top - window.innerHeight * 0.3, behavior: calm ? 'auto' : 'smooth' } );
+                }
+
+                // Keeps a compact player pinned to the bottom of the screen while listening, once the original scrolls away.
+                watchScroll() {
+                        this.anchor = document.createElement( 'div' );
+                        this.anchor.className = 'auvrenth-tts-anchor';
+                        this.el.before( this.anchor );
+
+                        let queued = false;
+                        const queue = () => {
+                                if ( ! queued ) {
+                                        queued = true;
+                                        window.requestAnimationFrame( () => {
+                                                queued = false;
+                                                this.updateFloating();
+                                        } );
+                                }
+                        };
+                        // Capture, so a theme that scrolls inside an element instead of the window is noticed too.
+                        window.addEventListener( 'scroll', queue, { passive: true, capture: true } );
+                        window.addEventListener( 'resize', queue );
+                }
+
+                updateFloating() {
+                        if ( ! this.anchor ) {
+                                return;
+                        }
+                        const floating = this.el.classList.contains( 'auvrenth-tts--floating' );
+                        // While floating, the anchor holds the player's place in the page.
+                        const rect = ( floating ? this.anchor : this.el ).getBoundingClientRect();
+                        const offscreen = rect.bottom < 0 || rect.top > window.innerHeight;
+                        const wanted = this.state !== 'idle' && offscreen;
+                        if ( wanted === floating ) {
+                                return;
+                        }
+                        if ( wanted ) {
+                                const style = window.getComputedStyle( this.el );
+                                this.anchor.style.height = this.el.offsetHeight + parseFloat( style.marginTop ) + parseFloat( style.marginBottom ) + 'px';
+                        } else {
+                                this.anchor.style.height = '';
+                        }
+                        this.el.classList.toggle( 'auvrenth-tts--floating', wanted );
+                }
+
                 render() {
                         const labels = {
@@ -294 +602 @@
                         const idle = this.state === 'idle';
                         const speed = this.rate + '×';
-                        let meta = format( idle ? l10n.minListen : l10n.minLeft, this.minutesFrom( idle ? 0 : this.index ) );
+                        const minutes = Math.max( 1, Math.round( ( this.total - this.read() ) / ( CHARS_PER_SECOND * this.rate ) / 60 ) );
+                        let meta = format( idle ? l10n.minListen : l10n.minLeft, minutes );
                         if ( this.state === 'paused' ) {
-                                meta = ( l10n.paused || 'Paused' ) + ' · ' + meta;
+                                meta = ( this.stopped ? l10n.stopped || 'Stopped' : l10n.paused || 'Paused' ) + ' · ' + meta;
                         }
 
                         this.el.dataset.state = this.state;
                         this.toggle.setAttribute( 'aria-label', labels[ this.state ] );
+                        this.toggle.title = labels[ this.state ];
                         this.meta.textContent = meta;
                         this.speedButton.textContent = speed;
                         this.speedButton.setAttribute( 'aria-label', format( l10n.speed, speed ) );
-                        this.progress.style.width = idle ? '0' : ( this.index / this.chunks.length ) * 100 + '%';
+                        this.speedButton.title = format( l10n.speed, speed );
+                        this.updateProgress();
+                        this.showHighlight();
+                        this.updateFloating();
+
+                        // Move the bar while a sentence is spoken, not only when the next one starts.
+                        if ( this.state === 'playing' && ! this.ticker ) {
+                                this.ticker = window.setInterval( () => this.updateProgress(), 250 );
+                        } else if ( this.state !== 'playing' && this.ticker ) {
+                                window.clearInterval( this.ticker );
+                                this.ticker = null;
+                        }
                 }
         }
@@ -312 +633 @@
                 V.onChange( () => players.forEach( ( player ) => player.refreshVoices() ) );
         }
+
+        // Hands, wheels and scroll keys mean the visitor is steering the page.
+        [ 'wheel', 'touchmove' ].forEach( ( type ) => {
+                window.addEventListener( type, () => {
+                        lastInput = window.performance.now();
+                }, { passive: true } );
+        } );
+        window.addEventListener( 'keydown', ( e ) => {
+                const scrollKeys = [ 'PageUp', 'PageDown', 'Home', 'End', 'ArrowUp', 'ArrowDown', ' ' ];
+                // On a button or list the key operates that control (Space presses it), it does not scroll.
+                if ( scrollKeys.includes( e.key ) && ! e.target.closest( 'button, select, input, textarea, a' ) ) {
+                        lastInput = window.performance.now();
+                }
+        }, { passive: true } );
 
         // Some browsers keep speaking after the visitor leaves the page.

auvrenth-text-to-speech-reader/trunk/auvrenth-text-to-speech-reader.php

@@ -3 +3 @@
  * Plugin Name: Auvrenth Text-to-Speech Reader
  * Description: Add a listen button to your posts so visitors can hear them read aloud, using the browser's built-in voices.
- * Version: 0.1.0
+ * Version: 1.0.0
  * Requires at least: 6.3
  * Requires PHP: 8.0
@@ -18 +18 @@
 }
 
-define( 'AUVRENTH_TTS_VERSION', '0.1.0' );
+define( 'AUVRENTH_TTS_VERSION', '1.0.0' );
 define( 'AUVRENTH_TTS_PLUGIN_FILE', __FILE__ );
 define( 'AUVRENTH_TTS_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );

auvrenth-text-to-speech-reader/trunk/includes/Player.php

@@ -19 +19 @@
         public const VOICES_HANDLE = 'auvrenth-tts-voices';
 
+        public const BLOCK = 'auvrenth-tts/player';
+
         private const HANDLE = 'auvrenth-tts';
         private const SPEEDS = array( 0.75, 1.0, 1.25, 1.5, 2.0 );
+
+        /**
+         * Cache-busting version for a bundled file: the plugin version plus the file's modified time, so a changed
+         * file is never served from a browser's or CDN's old copy under the same version number.
+         *
+         * @param string $path File path relative to the plugin folder.
+         */
+        public static function asset_version( string $path ): string {
+                $modified = filemtime( AUVRENTH_TTS_PLUGIN_DIR . $path );
+
+                return false === $modified ? AUVRENTH_TTS_VERSION : AUVRENTH_TTS_VERSION . '.' . $modified;
+        }
 
         /**
@@ -30 +44 @@
                         AUVRENTH_TTS_PLUGIN_URL . 'assets/js/voices.js',
                         array(),
-                        AUVRENTH_TTS_VERSION,
+                        self::asset_version( 'assets/js/voices.js' ),
                         array(
                                 'in_footer' => true,
@@ -39 +53 @@
 
         /**
-         * Hooks the shortcode, content filter and assets.
+         * Hooks the shortcode, block, content filter and assets.
          */
         public function register(): void {
                 add_shortcode( 'auvrenth_tts', array( $this, 'shortcode' ) );
+                add_action( 'init', array( $this, 'register_block' ) );
                 add_filter( 'the_content', array( $this, 'filter_content' ), 20 );
                 add_action( 'wp_enqueue_scripts', array( $this, 'register_assets' ) );
@@ -48 +63 @@
 
         /**
+         * Registers the Auvrenth Player block, rendered on the server like the shortcode.
+         */
+        public function register_block(): void {
+                // The editor shows the real player styles, so the preview looks like the published page.
+                wp_register_style( self::HANDLE, AUVRENTH_TTS_PLUGIN_URL . 'assets/css/player.css', array(), self::asset_version( 'assets/css/player.css' ) );
+
+                $type = register_block_type(
+                        AUVRENTH_TTS_PLUGIN_DIR . 'blocks/player',
+                        array( 'render_callback' => array( $this, 'render_block' ) )
+                );
+                if ( ! $type || empty( $type->editor_script_handles ) ) {
+                        return;
+                }
+
+                // What the block falls back to when a setting is left on "site setting".
+                $settings = Settings::get();
+                wp_add_inline_script(
+                        $type->editor_script_handles[0],
+                        'window.auvrenthTtsBlock = ' . wp_json_encode(
+                                array(
+                                        'label'      => $settings['button_label'],
+                                        'rate'       => (float) $settings['rate'],
+                                        'accent'     => strtolower( $settings['accent'] ) !== Settings::DEFAULT_ACCENT ? $settings['accent'] : '',
+                                        'iconColor'  => $settings['icon_color'],
+                                        'textColor'  => $settings['text_color'],
+                                        'highlight'  => (bool) $settings['highlight'],
+                                        'autoscroll' => (bool) $settings['autoscroll'],
+                                        'sticky'     => (bool) $settings['sticky'],
+                                        'switcher'   => (bool) $settings['show_switcher'],
+                                        'speeds'     => self::SPEEDS,
+                                )
+                        ) . ';',
+                        'before'
+                );
+        }
+
+        /**
+         * Output for the Auvrenth Player block: the player wrapped in the block's own classes and spacing.
+         *
+         * @param array $attributes Block settings chosen in the editor.
+         */
+        public function render_block( array $attributes ): string {
+                $post = get_post();
+                if ( ! $post || MetaBox::is_disabled( $post->ID ) ) {
+                        return '';
+                }
+
+                $player = $this->render( $post, 'manual', self::overrides_from( $attributes ) );
+                if ( '' === $player ) {
+                        return '';
+                }
+
+                return '<div ' . get_block_wrapper_attributes() . '>' . $player . '</div>';
+        }
+
+        /**
+         * Turns block settings into the site settings they replace. A setting left on "site setting" is not included.
+         *
+         * @param array $attributes Block settings chosen in the editor.
+         */
+        private static function overrides_from( array $attributes ): array {
+                $overrides = array();
+
+                $label = sanitize_text_field( (string) ( $attributes['label'] ?? '' ) );
+                if ( '' !== $label ) {
+                        $overrides['button_label'] = $label;
+                }
+
+                $rate = (float) ( $attributes['rate'] ?? 0 );
+                if ( in_array( $rate, self::SPEEDS, true ) ) {
+                        $overrides['rate'] = $rate;
+                }
+
+                $colors = array(
+                        'accentColor' => 'accent',
+                        'iconColor'   => 'icon_color',
+                        'textColor'   => 'text_color',
+                );
+                foreach ( $colors as $attribute => $setting ) {
+                        $color = sanitize_hex_color( (string) ( $attributes[ $attribute ] ?? '' ) );
+                        if ( $color ) {
+                                $overrides[ $setting ] = $color;
+                        }
+                }
+
+                // The site's icon color was picked for the site's button color, so a button color chosen here
+                // gets an icon that suits it, unless this block picks an icon color too.
+                if ( isset( $overrides['accent'] ) && ! isset( $overrides['icon_color'] ) ) {
+                        $overrides['icon_color'] = '';
+                }
+
+                foreach ( array( 'highlight', 'autoscroll', 'sticky' ) as $setting ) {
+                        $choice = $attributes[ $setting ] ?? 'inherit';
+                        if ( 'on' === $choice || 'off' === $choice ) {
+                                $overrides[ $setting ] = 'on' === $choice;
+                        }
+                }
+
+                return $overrides;
+        }
+
+        /**
          * Registers the player's style and scripts, enqueuing them where the player will show.
          */
         public function register_assets(): void {
-                wp_register_style( self::HANDLE, AUVRENTH_TTS_PLUGIN_URL . 'assets/css/player.css', array(), AUVRENTH_TTS_VERSION );
+                wp_register_style( self::HANDLE, AUVRENTH_TTS_PLUGIN_URL . 'assets/css/player.css', array(), self::asset_version( 'assets/css/player.css' ) );
                 self::register_voices_script();
                 wp_register_script(
@@ -57 +174 @@
                         AUVRENTH_TTS_PLUGIN_URL . 'assets/js/player.js',
                         array( self::VOICES_HANDLE ),
-                        AUVRENTH_TTS_VERSION,
+                        self::asset_version( 'assets/js/player.js' ),
                         array(
                                 'in_footer' => true,
@@ -73 +190 @@
                                 'resume'    => __( 'Resume', 'auvrenth-text-to-speech-reader' ),
                                 'paused'    => __( 'Paused', 'auvrenth-text-to-speech-reader' ),
+                                'stopped'   => __( 'Stopped', 'auvrenth-text-to-speech-reader' ),
                                 /* translators: %s: estimated number of minutes. */
                                 'minListen' => __( '%s min listen', 'auvrenth-text-to-speech-reader' ),
@@ -103 +221 @@
                 $post     = get_post();
                 $position = Settings::get()['position'];
-                if ( ! $post || 'manual' === $position || ! $this->is_enabled_for( $post ) || has_shortcode( $post->post_content, 'auvrenth_tts' ) ) {
+                if ( ! $post || 'manual' === $position || ! $this->is_enabled_for( $post ) || $this->is_placed_manually( $post ) ) {
                         return $content;
                 }
@@ -113 +231 @@
 
         /**
-         * Output for the [auvrenth_tts] shortcode.
+         * Whether the post places the player itself with the shortcode or the block.
+         *
+         * @param \WP_Post $post Post to check.
+         */
+        private function is_placed_manually( \WP_Post $post ): bool {
+                return has_shortcode( $post->post_content, 'auvrenth_tts' ) || has_block( self::BLOCK, $post );
+        }
+
+        /**
+         * Output for the [auvrenth_tts] shortcode and the Auvrenth Player block.
          */
         public function shortcode(): string {
@@ -145 +272 @@
          *
          * @param \WP_Post $post     Post to read.
-         * @param string   $position Placement: before, after or manual.
-         */
-        private function render( \WP_Post $post, string $position ): string {
+         * @param string   $position  Placement: before, after or manual.
+         * @param array    $overrides Settings that replace the site settings for this one player.
+         */
+        private function render( \WP_Post $post, string $position, array $overrides = array() ): string {
                 if ( post_password_required( $post ) ) {
                         return '';
@@ -159 +287 @@
                 $this->enqueue();
 
-                $settings = Settings::get();
+                $settings = array_merge( Settings::get(), $overrides );
                 $rate     = (float) $settings['rate'];
                 $speeds   = self::SPEEDS;
@@ -167 +295 @@
                 }
                 $panel_id = wp_unique_id( 'auvrenth-tts-panel-' );
+                // Only a color the site owner picked is written out, so a theme can still restyle the default.
+                $accent_style  = '';
+                $custom_accent = strtolower( $settings['accent'] ) !== Settings::DEFAULT_ACCENT;
+                if ( $custom_accent ) {
+                        $accent_style = '--auvrenth-tts-accent:' . $settings['accent'] . ';';
+                }
+                // The play icon follows the chosen color, or switches between white and black to stay readable on the button.
+                if ( '' !== $settings['icon_color'] ) {
+                        $accent_style .= '--auvrenth-tts-accent-text:' . $settings['icon_color'] . ';';
+                } elseif ( $custom_accent ) {
+                        $accent_style .= '--auvrenth-tts-accent-text:' . self::readable_text_on( $settings['accent'] ) . ';';
+                }
+                if ( '' !== $settings['text_color'] ) {
+                        $accent_style .= 'color:' . $settings['text_color'] . ';';
+                }
 
                 ob_start();
                 ?>
-                <div class="auvrenth-tts auvrenth-tts--<?php echo esc_attr( $position ); ?>" data-auvrenth-tts data-state="idle" data-text="<?php echo esc_attr( $text ); ?>" data-rate="<?php echo esc_attr( (string) $rate ); ?>" data-speeds="<?php echo esc_attr( (string) wp_json_encode( $speeds ) ); ?>" hidden>
+                <div class="auvrenth-tts auvrenth-tts--<?php echo esc_attr( $position ); ?>" data-auvrenth-tts data-state="idle" data-text="<?php echo esc_attr( $text ); ?>" data-rate="<?php echo esc_attr( (string) $rate ); ?>" data-pitch="<?php echo esc_attr( (string) $settings['pitch'] ); ?>" data-speeds="<?php echo esc_attr( (string) wp_json_encode( $speeds ) ); ?>" data-highlight="<?php echo $settings['highlight'] ? '1' : '0'; ?>" data-autoscroll="<?php echo $settings['autoscroll'] ? '1' : '0'; ?>" data-sticky="<?php echo $settings['sticky'] ? '1' : '0'; ?>" style="<?php echo esc_attr( $accent_style ); ?>" hidden>
                         <div class="auvrenth-tts__bar">
                                 <button type="button" class="auvrenth-tts__toggle" aria-label="<?php esc_attr_e( 'Play', 'auvrenth-text-to-speech-reader' ); ?>">
@@ -181 +324 @@
                                 </div>
                                 <div class="auvrenth-tts__actions">
-                                        <button type="button" class="auvrenth-tts__stop" aria-label="<?php esc_attr_e( 'Stop', 'auvrenth-text-to-speech-reader' ); ?>">
+                                        <button type="button" class="auvrenth-tts__prev" title="<?php esc_attr_e( 'Previous sentence', 'auvrenth-text-to-speech-reader' ); ?>" aria-label="<?php esc_attr_e( 'Previous sentence', 'auvrenth-text-to-speech-reader' ); ?>" aria-keyshortcuts="ArrowLeft">
+                                                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="6" y="6" width="2.2" height="12" rx="1"/><path d="M18 7.1v9.8c0 .8-.9 1.3-1.6.8l-7-4.9c-.6-.4-.6-1.2 0-1.6l7-4.9c.7-.5 1.6 0 1.6.8z"/></svg>
+                                        </button>
+                                        <button type="button" class="auvrenth-tts__stop" title="<?php esc_attr_e( 'Stop', 'auvrenth-text-to-speech-reader' ); ?>" aria-label="<?php esc_attr_e( 'Stop', 'auvrenth-text-to-speech-reader' ); ?>">
                                                 <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>
+                                        </button>
+                                        <button type="button" class="auvrenth-tts__resume" title="<?php esc_attr_e( 'Resume', 'auvrenth-text-to-speech-reader' ); ?>" aria-label="<?php esc_attr_e( 'Resume', 'auvrenth-text-to-speech-reader' ); ?>">
+                                                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8 5.6v12.8c0 .8.9 1.3 1.6.9l10-6.4c.6-.4.6-1.3 0-1.7l-10-6.4C8.9 4.3 8 4.8 8 5.6z"/></svg>
+                                        </button>
+                                        <button type="button" class="auvrenth-tts__next" title="<?php esc_attr_e( 'Next sentence', 'auvrenth-text-to-speech-reader' ); ?>" aria-label="<?php esc_attr_e( 'Next sentence', 'auvrenth-text-to-speech-reader' ); ?>" aria-keyshortcuts="ArrowRight">
+                                                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="15.8" y="6" width="2.2" height="12" rx="1"/><path d="M6 7.1v9.8c0 .8.9 1.3 1.6.8l7-4.9c.6-.4.6-1.2 0-1.6l-7-4.9C6.9 5.8 6 6.3 6 7.1z"/></svg>
                                         </button>
                                         <button type="button" class="auvrenth-tts__speed"><?php echo esc_html( $rate . '×' ); ?></button>
                                         <?php if ( $settings['show_switcher'] ) : ?>
-                                                <button type="button" class="auvrenth-tts__settings" aria-label="<?php esc_attr_e( 'Language and voice', 'auvrenth-text-to-speech-reader' ); ?>" aria-expanded="false" aria-controls="<?php echo esc_attr( $panel_id ); ?>" hidden>
+                                                <button type="button" class="auvrenth-tts__settings" title="<?php esc_attr_e( 'Language and voice', 'auvrenth-text-to-speech-reader' ); ?>" aria-label="<?php esc_attr_e( 'Language and voice', 'auvrenth-text-to-speech-reader' ); ?>" aria-expanded="false" aria-controls="<?php echo esc_attr( $panel_id ); ?>" hidden>
                                                         <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></svg>
                                                 </button>
@@ -202 +354 @@
                                                 <select></select>
                                         </label>
+                                        <?php if ( $settings['volume_note'] ) : ?>
+                                                <p class="auvrenth-tts__note"><?php esc_html_e( 'To change the volume, use your device\'s volume controls.', 'auvrenth-text-to-speech-reader' ); ?></p>
+                                        <?php endif; ?>
                                 </div>
                         <?php endif; ?>
@@ -211 +366 @@
 
         /**
-         * Plain text the browser reads aloud: the title followed by the post body.
+         * White or black, whichever is easier to read on top of a background color (WCAG contrast).
+         *
+         * @param string $hex Background color such as #1e40af or #fff.
+         */
+        private static function readable_text_on( string $hex ): string {
+                $hex = ltrim( $hex, '#' );
+                if ( 3 === strlen( $hex ) ) {
+                        $hex = $hex[0] . $hex[0] . $hex[1] . $hex[1] . $hex[2] . $hex[2];
+                }
+
+                // Red, green and blue as 0-1 values, each weighted by how bright the eye sees it.
+                $luminance = 0.0;
+                foreach ( array(
+                        array( 0, 0.2126 ),
+                        array( 2, 0.7152 ),
+                        array( 4, 0.0722 ),
+                ) as list( $offset, $weight ) ) {
+                        $channel    = hexdec( substr( $hex, $offset, 2 ) ) / 255;
+                        $luminance += $weight * ( $channel <= 0.03928 ? $channel / 12.92 : pow( ( $channel + 0.055 ) / 1.055, 2.4 ) );
+                }
+
+                // Below this luminance white text has the stronger contrast; above it black does.
+                return $luminance < 0.179 ? '#ffffff' : '#111111';
+        }
+
+        /**
+         * Plain text the browser reads aloud: the title followed by the post body, one line per block.
          *
          * @param \WP_Post $post Post to read.
          */
         public static function text_for( \WP_Post $post ): string {
-                $text = get_the_title( $post ) . '. ' . strip_shortcodes( $post->post_content );
-                $text = html_entity_decode( wp_strip_all_tags( $text ), ENT_QUOTES | ENT_HTML5, 'UTF-8' );
-                $text = trim( (string) preg_replace( '/\s+/u', ' ', $text ) );
+                // End each block-level element with a line break so headings and list items are read as their own sentences.
+                $content = (string) preg_replace( '#</(?:p|h[1-6]|li|blockquote|figcaption|pre|td|th|dt|dd)>#i', "$0\n", strip_shortcodes( $post->post_content ) );
+                $text    = html_entity_decode( wp_strip_all_tags( get_the_title( $post ) . "\n" . $content ), ENT_QUOTES | ENT_HTML5, 'UTF-8' );
+                $text    = (string) preg_replace( '/(?:[^\S\n]|\x{00A0})+/u', ' ', $text );
+                $text    = trim( (string) preg_replace( '/ ?\n[\s\x{00A0}]*/u', "\n", $text ) );
 
                 /**
                  * Filters the text Auvrenth Text-to-Speech Reader reads aloud for a post.
                  *
-                 * @param string   $text Plain text to read.
+                 * @param string   $text Plain text to read. Line breaks separate blocks such as headings.
                  * @param \WP_Post $post Post being read.
                  */

auvrenth-text-to-speech-reader/trunk/includes/Settings.php

@@ -20 +20 @@
         public const PAGE   = 'auvrenth-tts';
 
+        public const DEFAULT_ACCENT = '#1e40af';
+
         private const POSITIONS = array( 'before', 'after', 'manual' );
 
@@ -31 +33 @@
                         'button_label'  => __( 'Listen to this article', 'auvrenth-text-to-speech-reader' ),
                         'rate'          => 1.0,
+                        'pitch'         => 1.0,
+                        'highlight'     => true,
+                        'autoscroll'    => true,
+                        'sticky'        => true,
+                        'accent'        => self::DEFAULT_ACCENT,
+                        'icon_color'    => '', // Empty picks white or black to suit the button color.
+                        'text_color'    => '', // Empty follows the theme's text color.
                         'language'      => '',
                         'voice'         => '',
                         'show_switcher' => true,
+                        'volume_note'   => true,
                 );
         }
@@ -121 +131 @@
 
                 Player::register_voices_script();
-                wp_enqueue_script( 'auvrenth-tts-admin', AUVRENTH_TTS_PLUGIN_URL . 'assets/js/admin.js', array( Player::VOICES_HANDLE ), AUVRENTH_TTS_VERSION, true );
+                wp_enqueue_style( 'wp-color-picker' );
+                wp_enqueue_script( 'auvrenth-tts-admin', AUVRENTH_TTS_PLUGIN_URL . 'assets/js/admin.js', array( Player::VOICES_HANDLE, 'wp-color-picker' ), Player::asset_version( 'assets/js/admin.js' ), true );
                 wp_localize_script(
                         'auvrenth-tts-admin',
@@ -166 +177 @@
                 add_settings_field( 'button_label', __( 'Button label', 'auvrenth-text-to-speech-reader' ), array( $this, 'field_button_label' ), self::PAGE, 'auvrenth_tts_general', array( 'label_for' => 'auvrenth-tts-button-label' ) );
                 add_settings_field( 'rate', __( 'Default speed', 'auvrenth-text-to-speech-reader' ), array( $this, 'field_rate' ), self::PAGE, 'auvrenth_tts_general', array( 'label_for' => 'auvrenth-tts-rate' ) );
+                add_settings_field( 'pitch', __( 'Default pitch', 'auvrenth-text-to-speech-reader' ), array( $this, 'field_pitch' ), self::PAGE, 'auvrenth_tts_general', array( 'label_for' => 'auvrenth-tts-pitch' ) );
+                add_settings_field( 'reading_aids', __( 'While listening', 'auvrenth-text-to-speech-reader' ), array( $this, 'field_reading_aids' ), self::PAGE, 'auvrenth_tts_general' );
+                add_settings_field( 'accent', __( 'Play button color', 'auvrenth-text-to-speech-reader' ), array( $this, 'field_accent' ), self::PAGE, 'auvrenth_tts_general', array( 'label_for' => 'auvrenth-tts-accent' ) );
+                add_settings_field( 'icon_color', __( 'Play icon color', 'auvrenth-text-to-speech-reader' ), array( $this, 'field_icon_color' ), self::PAGE, 'auvrenth_tts_general', array( 'label_for' => 'auvrenth-tts-icon-color' ) );
+                add_settings_field( 'text_color', __( 'Title and control color', 'auvrenth-text-to-speech-reader' ), array( $this, 'field_text_color' ), self::PAGE, 'auvrenth_tts_general', array( 'label_for' => 'auvrenth-tts-text-color' ) );
 
                 add_settings_field( 'language', __( 'Default language', 'auvrenth-text-to-speech-reader' ), array( $this, 'field_language' ), self::PAGE, 'auvrenth_tts_voice', array( 'label_for' => 'auvrenth-tts-language' ) );
@@ -196 +212 @@
                 $rate = (float) ( $input['rate'] ?? $defaults['rate'] );
                 $rate = round( min( 2.0, max( 0.5, $rate ) ) * 4 ) / 4;
+
+                $accent = sanitize_hex_color( $input['accent'] ?? '' );
+                if ( ! $accent ) {
+                        $accent = $defaults['accent'];
+                }
+
+                // Empty is allowed for both: the player then picks the icon color itself and uses the theme's text color.
+                $icon_color = (string) sanitize_hex_color( $input['icon_color'] ?? '' );
+                $text_color = (string) sanitize_hex_color( $input['text_color'] ?? '' );
+
+                $pitch = (float) ( $input['pitch'] ?? $defaults['pitch'] );
+                $pitch = round( min( 2.0, max( 0.5, $pitch ) ), 1 );
 
                 // A BCP 47 tag such as "bn", "en-US" or "zh-Hant-TW"; empty means follow the site language.
@@ -211 +239 @@
                         'button_label'  => $label,
                         'rate'          => $rate,
+                        'pitch'         => $pitch,
+                        'highlight'     => ! empty( $input['highlight'] ),
+                        'autoscroll'    => ! empty( $input['autoscroll'] ),
+                        'sticky'        => ! empty( $input['sticky'] ),
+                        'accent'        => $accent,
+                        'icon_color'    => $icon_color,
+                        'text_color'    => $text_color,
                         'language'      => $language,
                         'voice'         => $voice,
                         'show_switcher' => ! empty( $input['show_switcher'] ),
+                        'volume_note'   => ! empty( $input['volume_note'] ),
                 );
         }
@@ -311 +347 @@
 
         /**
+         * Default pitch input.
+         */
+        public function field_pitch(): void {
+                printf(
+                        '<input type="number" id="auvrenth-tts-pitch" class="small-text" name="%s[pitch]" value="%s" min="0.5" max="2" step="0.1"> <span class="description">%s</span>',
+                        esc_attr( self::OPTION ),
+                        esc_attr( (string) self::get()['pitch'] ),
+                        esc_html__( '1 is the voice\'s normal pitch. Some browser voices ignore pitch and always use their own.', 'auvrenth-text-to-speech-reader' )
+                );
+        }
+
+        /**
+         * Play button color picker.
+         */
+        public function field_accent(): void {
+                printf(
+                        '<input type="text" id="auvrenth-tts-accent" class="auvrenth-tts-color-field" name="%s[accent]" value="%s" data-default-color="%s"> <p class="description">%s</p>',
+                        esc_attr( self::OPTION ),
+                        esc_attr( self::get()['accent'] ),
+                        esc_attr( self::DEFAULT_ACCENT ),
+                        esc_html__( 'Also used for the progress bar and the keyboard focus outline.', 'auvrenth-text-to-speech-reader' )
+                );
+        }
+
+        /**
+         * Play icon color picker.
+         */
+        public function field_icon_color(): void {
+                printf(
+                        '<input type="text" id="auvrenth-tts-icon-color" class="auvrenth-tts-color-field" name="%s[icon_color]" value="%s"> <p class="description">%s</p>',
+                        esc_attr( self::OPTION ),
+                        esc_attr( self::get()['icon_color'] ),
+                        esc_html__( 'The play and pause icon inside the round button. Leave empty to pick white or black automatically to suit the button color.', 'auvrenth-text-to-speech-reader' )
+                );
+        }
+
+        /**
+         * Title and control color picker.
+         */
+        public function field_text_color(): void {
+                printf(
+                        '<input type="text" id="auvrenth-tts-text-color" class="auvrenth-tts-color-field" name="%s[text_color]" value="%s"> <p class="description">%s</p>',
+                        esc_attr( self::OPTION ),
+                        esc_attr( self::get()['text_color'] ),
+                        esc_html__( 'The title, the time and the skip, speed and settings icons next to the play button. Leave empty to use your theme\'s text color.', 'auvrenth-text-to-speech-reader' )
+                );
+        }
+
+        /**
+         * Highlight and floating player checkboxes.
+         */
+        public function field_reading_aids(): void {
+                $settings = self::get();
+                ?>
+                <fieldset>
+                        <legend class="screen-reader-text"><?php esc_html_e( 'While listening', 'auvrenth-text-to-speech-reader' ); ?></legend>
+                        <label>
+                                <input type="checkbox" name="<?php echo esc_attr( self::OPTION ); ?>[highlight]" value="1" <?php checked( $settings['highlight'] ); ?>>
+                                <?php esc_html_e( 'Highlight the sentence being read', 'auvrenth-text-to-speech-reader' ); ?>
+                        </label><br>
+                        <label>
+                                <input type="checkbox" name="<?php echo esc_attr( self::OPTION ); ?>[autoscroll]" value="1" <?php checked( $settings['autoscroll'] ); ?>>
+                                <?php esc_html_e( 'Scroll the page to follow the sentence being read', 'auvrenth-text-to-speech-reader' ); ?>
+                        </label><br>
+                        <label>
+                                <input type="checkbox" name="<?php echo esc_attr( self::OPTION ); ?>[sticky]" value="1" <?php checked( $settings['sticky'] ); ?>>
+                                <?php esc_html_e( 'Keep a mini player at the bottom of the screen after the player scrolls out of view', 'auvrenth-text-to-speech-reader' ); ?>
+                        </label>
+                </fieldset>
+                <?php
+        }
+
+        /**
          * Default language select, filled with browser languages by admin.js.
          */
@@ -349 +458 @@
 
         /**
-         * Visitor language switcher checkbox.
+         * Visitor language switcher and volume note checkboxes.
          */
         public function field_show_switcher(): void {
-                ?>
-                <label>
-                        <input type="checkbox" name="<?php echo esc_attr( self::OPTION ); ?>[show_switcher]" value="1" <?php checked( self::get()['show_switcher'] ); ?>>
-                        <?php esc_html_e( 'Let visitors choose the language and voice in the player', 'auvrenth-text-to-speech-reader' ); ?>
-                </label>
+                $settings = self::get();
+                ?>
+                <fieldset>
+                        <legend class="screen-reader-text"><?php esc_html_e( 'Language switcher', 'auvrenth-text-to-speech-reader' ); ?></legend>
+                        <label>
+                                <input type="checkbox" name="<?php echo esc_attr( self::OPTION ); ?>[show_switcher]" value="1" <?php checked( $settings['show_switcher'] ); ?>>
+                                <?php esc_html_e( 'Let visitors choose the language and voice in the player', 'auvrenth-text-to-speech-reader' ); ?>
+                        </label><br>
+                        <label>
+                                <input type="checkbox" name="<?php echo esc_attr( self::OPTION ); ?>[volume_note]" value="1" <?php checked( $settings['volume_note'] ); ?>>
+                                <?php esc_html_e( 'Show a note in that panel that volume is set with the device\'s controls', 'auvrenth-text-to-speech-reader' ); ?>
+                        </label>
+                </fieldset>
                 <?php
         }

auvrenth-text-to-speech-reader/trunk/readme.txt

@@ -1 +1 @@
 === Auvrenth Text-to-Speech Reader ===
-Contributors: auvrenthstudio, rlorakib
+Contributors: auvrenthstudio
 Tags: text to speech, tts, accessibility, audio, read aloud
 Requires at least: 6.3
 Tested up to: 7.1
 Requires PHP: 8.0
-Stable tag: 0.1.0
+Stable tag: 1.0.0
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -15 +15 @@
 Auvrenth Text-to-Speech Reader adds a listen button to your posts and pages. Visitors press play and the article is read aloud by the voices already built into their browser.
 
-* No API key, no account and no monthly cost.
-* No audio files stored on your server.
-* Play, pause, stop and speed control.
+It needs no account, no API key and no monthly cost, and it stores no audio files on your server. The speech is made on the visitor's own device, so nothing is sent to an outside service.
+
+= For visitors =
+
+* Play, pause and stop. Stopping keeps the visitor's place: the button turns into Resume and carries on from the word where reading stopped, where the voice reports its position.
+* Skip to the previous or next sentence, or click the progress bar to jump ahead.
+* Reading speed control, and a language and voice switcher whose choice is remembered.
+* The sentence being read is highlighted in the article, and the page scrolls along with it. Scrolling by hand pauses the following for a few seconds.
+* A mini player stays at the bottom of the screen when the player scrolls out of view while listening.
+* Keyboard friendly: the left and right arrow keys skip sentences while the player has focus, and every button has a tooltip and a screen reader label.
+
+= For site owners =
+
+* Choose the post types, and show the player before or after the content.
+* Set a default language, voice, speed and pitch, and test them right from the settings screen.
 * Uses a voice that matches your site language when the browser has one.
-* Set a default language and voice, and test it right from the settings screen.
-* Visitors can switch the language and voice in the player, and their choice is remembered.
-* Choose the post types, and show the player before or after the content.
-* Hide the player on single posts, or place it anywhere with the `[auvrenth_tts]` shortcode.
+* Turn sentence highlighting, page scrolling, the mini player and the language switcher on or off.
+* Match your site with the play button color, the play icon color and the title and control color.
+* Hide the player on single posts, or place it anywhere with the Auvrenth Player block or the `[auvrenth_tts]` shortcode.
+* Change what is read aloud with the `auvrenth_tts_text` filter.
 
-The player only appears in browsers that support speech synthesis, which covers all current versions of Chrome, Edge, Safari and Firefox.
+The player only appears in browsers that support speech synthesis, which covers all current versions of Chrome, Edge, Safari and Firefox. Sentence highlighting needs a browser with the CSS Custom Highlight API: current Chrome, Edge and Safari, and Firefox 140 or later. Everything else works without it.
 
-= Shortcode =
+= Auvrenth Player block and shortcode =
 
-Add `[auvrenth_tts]` to a post or page, or to a Shortcode block, to show the player exactly where you want it. It reads the post it is placed in.
+Add the Auvrenth Player block (in the block inserter under Media, or search for "Auvrenth"), or `[auvrenth_tts]` in a post, page or Shortcode block, to show the player exactly where you want it. It reads the post it is placed in.
 
+* The editor shows the player as visitors will see it, and the block sidebar changes that one player only: the button label, default speed, sentence highlighting, page scrolling, the mini player, and the play button, play icon and text colors. Anything left on "site setting" follows the settings screen.
+* The block also has the usual margin and HTML anchor settings.
 * Works on any post type, even ones not ticked under "Show on" in the settings.
-* When a post contains the shortcode, the automatic player is skipped there, so the player never shows twice.
-* Set "Player position" to "Only where I add the [auvrenth_tts] shortcode" to turn off automatic placement everywhere and use the shortcode only.
-* The shortcode shows nothing when the player is hidden for that post in the editor, or when the post is password protected.
+* When a post contains the block or the shortcode, the automatic player is skipped there, so the player never shows twice.
+* Set "Player position" to "Only where I add the [auvrenth_tts] shortcode" to turn off automatic placement everywhere and use the block or shortcode only.
+* The block and shortcode show nothing when the player is hidden for that post in the editor, or when the post is password protected.
 
 == Installation ==
@@ -39 +53 @@
 1. Upload the `auvrenth-text-to-speech-reader` folder to `/wp-content/plugins/`, or install it from the Plugins screen.
 2. Activate the plugin.
-3. Open Auvrenth Reader in the admin menu to choose where the player appears.
+3. Open Auvrenth Reader in the admin menu to choose where the player appears and how it looks.
 
 == Frequently Asked Questions ==
@@ -51 +65 @@
 Each browser and operating system ships its own voices, so the voice depends on the visitor's device.
 
+= How do visitors change the volume? =
+
+With their device's own volume controls. Browsers do not let a website set the volume for every voice, so the player does not have a volume slider.
+
+= Why does the pitch setting not change some voices? =
+
+The default pitch is passed to the browser, but some voices, such as many online or "natural" voices, ignore it and always use their own pitch. The speed setting works with all voices.
+
 = How do I place the player in a different spot? =
 
-Add the `[auvrenth_tts]` shortcode where the player should appear. To use it in a theme template, call `<?php echo do_shortcode( '[auvrenth_tts]' ); ?>` inside the loop and set "Player position" to the shortcode-only option, so the automatic player does not show as well.
+Add the Auvrenth Player block, or the `[auvrenth_tts]` shortcode, where the player should appear. To use it in a theme template, call `<?php echo do_shortcode( '[auvrenth_tts]' ); ?>` inside the loop and set "Player position" to the shortcode-only option, so the automatic player does not show as well.
 
 = Can I change what is read aloud? =
 
-Yes. Use the `auvrenth_tts_text` filter to change the text for any post.
+Yes. Use the `auvrenth_tts_text` filter to change the text for any post. Line breaks in the text separate blocks such as headings and list items.
+
+= Why is a sentence not highlighted? =
+
+The player highlights a sentence when it finds the same words on the page. Text that is not shown on the page, such as a title the theme displays elsewhere or text changed with the `auvrenth_tts_text` filter, is still read but not highlighted.
+
+= Can I turn off the highlighting or the page scrolling? =
+
+Yes. Under "While listening" in the settings you can turn off sentence highlighting, page scrolling and the mini player separately.
+
+= Can I change the colors? =
+
+Yes. The settings screen has color pickers for the play button, the icon inside it, and the title and control icons. The Auvrenth Player block can set its own colors for one player. Themes can also restyle the player with the CSS custom properties `--auvrenth-tts-accent`, `--auvrenth-tts-accent-text` and `--auvrenth-tts-highlight`.
+
+= Can one post look or behave differently from the rest? =
+
+Yes. Add the Auvrenth Player block to that post and change its settings in the block sidebar. Anything left on "site setting" keeps following the settings screen. To remove the player from a post altogether, tick "Hide the listen button on this page" in the "Auvrenth Text-to-Speech Reader" box in the editor.
+
+= What does it store about visitors? =
+
+Only the language and voice a visitor picks in the player, kept in their own browser's local storage so the choice is remembered. No cookies are set and nothing is sent to your server or to any outside service.
+
+= What happens to my settings if I delete the plugin? =
+
+Deleting the plugin from the Plugins screen removes its settings and the per-post "hide the player" switches. Deactivating it keeps them.
+
+== Screenshots ==
+
+1. The player above an article, ready to play.
+2. Reading aloud: the sentence being read is highlighted, with previous, stop, next and speed controls.
+3. The mini player stays at the bottom of the screen while the visitor scrolls.
+4. The language and voice switcher in the player.
+5. The settings screen.
+6. The Auvrenth Player block in the editor, with its own settings in the sidebar.
 
 == Changelog ==
 
-= 0.1.0 =
+= 1.0.0 =
 * First release.
+* Listen button for posts and pages that reads the article aloud with the browser's own voices. No API key and no audio files.
+* Player controls: play, pause, stop (keeps the visitor's place and turns into Resume, which carries on from the word where reading stopped), previous and next sentence, click the progress bar to jump, and reading speed.
+* Sentence highlighting, with page scrolling that follows the reading and steps aside when the visitor scrolls by hand.
+* Mini player pinned to the bottom of the screen when the player scrolls out of view while listening.
+* Language and voice switcher in the player, remembered for the visitor's next visit.
+* Left and right arrow keys skip sentences, and every button has a tooltip and a screen reader label.
+* Settings screen: post types, player position, button label, default speed, pitch, language and voice with a test button, highlighting, page scrolling, mini player, language switcher, and a volume note.
+* Color settings for the play button, the play icon, and the title and control icons.
+* Auvrenth Player block with a live preview in the editor and its own settings for the label, speed, highlighting, scrolling, mini player and colors, plus the `[auvrenth_tts]` shortcode to place the player anywhere, and a per-post switch to hide it.
+* `auvrenth_tts_text` filter to change what is read aloud.