How to Add an Audio Button to WordPress Posts for Text-to-Speech Functionality without plugin

copy the code below and go to thame edit and function.php and past this code all over down to the code

function add_audio_button_to_posts($content) {
    // Check if it's a single post
    if (is_single() && in_the_loop() && is_main_query()) {
        // Define the audio button and script
        $audio_button = '
            <button id="readPost" style="margin-bottom: 20px; display: block; padding: 12px 18px; font-size: 16px; background: linear-gradient(145deg, #4e8ef7, #0073aa); color: white; border: none; border-radius: 30px; cursor: pointer; box-shadow: 2px 2px 10px rgba(0, 115, 170, 0.3); transition: all 0.3s ease-in-out;">
                🔊 Listen to this post
            </button>
            <script>
                document.addEventListener("DOMContentLoaded", function () {
                    const button = document.getElementById("readPost");
                    let synth = window.speechSynthesis;
                    let isPlaying = false;

                    button.addEventListener("click", function () {
                        if (!isPlaying) {
                            // Create speech synthesis
                            const utterance = new SpeechSynthesisUtterance();
                            utterance.text = `' . wp_strip_all_tags($content) . '`;
                            utterance.rate = 1; // Adjust the speed (1 is normal speed)
                            utterance.pitch = 1.5; // Adjust the pitch
                            utterance.volume = 1; // Adjust the volume

                            // Handle end of speech
                            utterance.onend = function () {
                                isPlaying = false;
                                button.innerText = "🔊 Listen to this post";
                            };

                            // Speak the content
                            synth.speak(utterance);
                            isPlaying = true;
                            button.innerText = "⏹ Push";
                        } else {
                            // Push the speech
                            synth.cancel();
                            isPlaying = false;
                            button.innerText = "🔊 Listen to this post";
                        }
                    });
                });
            </script>
        ';
        // Prepend the audio button to the post content
        return $audio_button . $content;
    }
    return $content;
}
add_filter('the_content', 'add_audio_button_to_posts');

// Enqueue custom styles for the button
function enqueue_audio_button_styles() {
    echo '
    <style>
        #readPost {
            margin-bottom: 20px;
            display: block;
            padding: 12px 18px;
            font-size: 16px;
            background: linear-gradient(145deg, #4e8ef7, #0073aa);
            color: white;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            box-shadow: 2px 2px 10px rgba(0, 115, 170, 0.3);
            transition: all 0.3s ease-in-out;
        }
        
        #readPost:hover {
            background: linear-gradient(145deg, #0073aa, #4e8ef7);
            box-shadow: 4px 4px 15px rgba(0, 115, 170, 0.4);
        }
        
        #readPost:focus {
            outline: none;
        }
    </style>';
}
add_action('wp_head', 'enqueue_audio_button_styles');