{"version":"1.0.1","templatekey":"pw-multispeedplayer","name":"Player - MultiSpeedAudio","instructions":"<p>A player that can slow down or speed up. Insert an audio player or audio link between the tags. The multi speed audio player will take over.</p>","content":"<div id='{{AUTOID}}_container' class=\"poodll_multispeedplayer my-3\">\n  <div class=\"btn-group w-100 mb-1\" role=\"group\" aria-label=\"{{#str}} playbackspeed, filter_genericotwo {{/str}}\">\n    <button type=\"button\" id='{{AUTOID}}_slow' class=\"btn btn-outline-secondary btn-sm\" aria-pressed=\"false\">80%</button>\n    <button type=\"button\" id='{{AUTOID}}_medium' class=\"btn btn-outline-secondary btn-sm active\" aria-pressed=\"true\">100%</button>\n    <button type=\"button\" id='{{AUTOID}}_fast' class=\"btn btn-outline-secondary btn-sm\" aria-pressed=\"false\">125%</button>\n  </div>\n  <audio id=\"{{AUTOID}}_player\" controls class=\"nomediaplugin d-block w-100\"></audio>\n</div>\n<div id=\"{{AUTOID}}_original\" class=\"poodllplayerwidgetnoshow\" style=\"display: none\">","templateend":"</div>","variabledefaults":"","jscontent":"require(['filter_genericotwo/mediaparser'], (parser) => {\n\n    // Fetch the media url.\n    const details = parser.parse('{{AUTOID}}_original', 'audio');\n\n    const player = document.getElementById('{{AUTOID}}_player');\n    player.src = details.mediaurl;\n\n    // Speed buttons. The clicked button takes the active state.\n    const speeds = [\n        [document.getElementById('{{AUTOID}}_slow'), 0.8],\n        [document.getElementById('{{AUTOID}}_medium'), 1],\n        [document.getElementById('{{AUTOID}}_fast'), 1.25],\n    ];\n    for (const [button, rate] of speeds) {\n        button.addEventListener('click', () => {\n            player.playbackRate = rate;\n            for (const [other] of speeds) {\n                other.classList.toggle('active', other === button);\n                other.setAttribute('aria-pressed', String(other === button));\n            }\n        });\n    }\n});","importcss":"","customcss":".poodll_multispeedplayer {\n    max-width: 330px;\n}","dataset":"","datasetvars":"","allowedcontexts":"","allowedcontextids":""}