Create PoC

[IsaaacD]

Create a PoC to test all the changes and ensure they're working
This is my current implementation, you can use this to help make the PoC

<div class="container">
    <div class="dropdown" style="position:fixed; bottom: 1em;left:1em; z-index: 10000;">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            🔊
        </a>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <div class="dropdown-item">
                <input type="button" class="btn btn-secondary" id="playButton" title="Play" value="▶️" />
                <input type="button" class="btn btn-secondary" id="prevButton" title="Previous" value="↶" />
                <input type="button" class="btn btn-secondary" id="nextButton" title="Next" value="↷" />
                <input type="button" class="btn btn-secondary" id="stopButton" title="Stop" value="⏸️" />
                <input type="button" class="btn btn-secondary" id="refreshButton" onclick="window.location.reload()"
                    title="Refresh" value="⏺️" />
            </div>
            <div class="dropdown-item">
                Sentence: <span id="text-loc">1</span> <input type="range" id="textSlider" title="Text Location" min="0"
                    max="100" value="1" step="1" />
            </div>
            <div class="dropdown-item">
                Speed: <span id="text-speed">1</span> <input type="range" id="speedSlider" title="Speed" min="0.8"
                    max="1.3" value="1" step="0.1" />
            </div>
            <div class="dropdown-item">
                <label for="voices">Voices</label>
                <select id="voices">
                </select>
            </div>
        </div>
    </div>

[ricardo-mohammed]

Hey!