radikoプレイヤーUIの下に指定秒数スキップするボタンを配置するtampermonkeyスクリプト

radiko_skip.user.js

// ==UserScript==
// @name         radiko skip
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  radikoプレイヤーUIの下に指定秒数スキップするボタンを配置します
// @author       hetima
// @match        *://radiko.jp/*
// @grant        unsafeWindow
// @run-at       document-end
// @noframes
// ==/UserScript==

(function () {
    'use strict';

    /*
        addSkip(秒数, ボタンラベル)
        ラベルを省略すると秒数がそのまま使われる
        ここを適当に編集してください
    */
    addSkip(-30);
    addSkip(-10);
    addSkip(10);
    addSkip(30);
    addSkip(60, '▶1 min');
    addSkip(180, '▶3 min');
    addSkip(600, '▶10 min');










    /*
        unsafeWindow.play(url) にurlを投げるだけでシークできるみたいなのだが、
        上手くいかないことが多かったのでシークバーの操作をエミュレートすることにした
    */
    function skipPosition(secs = 0) {
        var seekBar = unsafeWindow.$("#seekbar");
        var knob = seekBar.find(".knob");
        if (knob.is(':hidden')) return; //リアルタイム試聴中はシークバー非表示

        var playTime = (unsafeWindow.player.totm() - unsafeWindow.player.fttm()) / 1000;
        var secsWidth = seekBar.width() / playTime;
        var x = knob.position().left + (secsWidth * secs);
        if (x < 0) x = 0; //マイナスはバグる
        knob.css('left', x);

        unsafeWindow.$.Radiko.Player.View.seekBarView.onDragSeekKnob()
    }


    function getSkipButtons() {
        var skipButtons = document.querySelector('.my-skip-buttons');
        if (skipButtons) return skipButtons;
        let playerArea = document.querySelector('#stream-player');
        skipButtons = document.createElement('div');
        skipButtons.className = 'my-skip-buttons';
        skipButtons.style.textAlign = 'center';
        skipButtons.style.paddingBottom = '8px';
        playerArea.appendChild(skipButtons);
        return skipButtons;
    }

    function addSkip(val, label = '') {
        let skipButtons = getSkipButtons();
        val = Number(val);
        if (label == '') {
            if (val > 0) {
                label = '▶' + String(val);
            } else if (Number(val) < 0) {
                label = '◀' + String(Math.abs(val));
            } else {
                label = String(val);
            }
        }
        let ctl = document.createElement('a');
        ctl.className = 'btn';
        ctl.style.background = '#e73c64';
        ctl.style.color = '#fff';
        ctl.style.margin = '0 4px';
        ctl.style.padding = '0 4px';
        ctl.href = 'javascript:void(0);';
        ctl.textContent = label;
        skipButtons.appendChild(ctl);
        ctl.addEventListener('click', function (event) {
            skipPosition(val);
        }, false);
    }

})();