使用 Javascript 修改環宇廣播線上收聽播放器

遇到了問題

最近在臉書上發現追蹤大人學的 Bryan & Joe，在環宇廣播電台開新的廣播節目啦，週四大人學。身為小粉絲的我，當然迫不急待從官方網站線上收聽。但遇到了一個大問題，手機上無法正常播放節目啊，這樣就不能在通勤時間收聽節目了。經過簡單的故障排除，發現是線上收聽播放器是手機無法支援的 Flash 播放器…。

既然無法使用在手機即時下載播放，又想到手機有網路傳輸流量限制，心中冒出一個解決方法，是否能夠先使用電腦下載，然後複製到手機離線播放呢？

製作解決方案

發揮之前寫網頁的經驗，分析線上收聽的網頁的原始碼，從中找出原始音源的檔案位置。用新視窗開啟該音源檔案，然後滑鼠右鍵點選下載。之後重新命名下載檔案名稱，貼上該節目名稱。最後複製到手機中，完成。

實際針對一兩集節目，操作以上步驟，心中感覺怎麼這麼麻煩！若每次新節目都要經過這麼多的步驟（大概三四個步驟吧），多辛苦啊。身為懶惰資工人，腦中思索能不能自動化，要怎麼自動化。能不能自動分析音源位置，自動抓節目名稱，產生一個下載連結，一點擊就下載完成。

那麼就開始寫 Script 吧，使用 TamperMonkey 這一個 Chrome 瀏覽器擴充，在播放器網頁載入完成後，執行以下Script，產生下載連結。

$(document).ready(function() {
    var embed = $("embed");

    // 音源位置
    var audioUrl = getUrlParameterFromString(embed.attr("flashvars"), "son");

    // 節目資料網頁位置
    var id = getUrlParameterFromString(window.location.search.substring(1), "ID");
    var dataUrl = "http://www.uni967.com/newweb/index.php?menu=2&page=2_1&ID=" + id;

    $.get(dataUrl, function(data) {
        // 分析資料網頁，抓取節目名稱
        var title = $(data).find("span.news_title_blue").text();
        var parent = embed.parent();
        
        // 產生下載連結
        var download = $('<a href="' + audioUrl + '" download="' + title + '">Download</a>');
        parent.append(download);
    });
});

var getUrlParameterFromString = function getUrlParameter(sUrl, sParam) {
    var sPageURL = decodeURIComponent(sUrl);
    var sURLVariables = sPageURL.split('&');

    for (var i = 0; i < sURLVariables.length; i++) {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] === sParam && sParameterName.length >= 2) {
            return sParameterName[1] === undefined ? '' : sParameterName[1];
        }
    }
};

Script 大量使用 jQuery 來快速抓取網頁中的指定標籤，而這些指定標籤取得方式，要感謝 Chrome 內鍵的主控台，選取有興趣的文字，滑鼠右鍵，檢查（Ctrl + Shift + I），就可以立刻找到該段文字的原始碼了。這功能太方便可以讓人快速找到這些有興趣的 Tag。

好像可以再追加點東西

總覺得還能加點東西，想起使用原先的 Flash 播放器時，聲音大小沒有辦法調整呢，這困擾一小段時間，常常需要從 Windows 混音器調整 Chrome 的播放聲音大小，特別是在自動被強迫升級成 Windows 10 之後，系統混音器就需要多一個操作步驟才能調整，非常不方便。為什麼播放器不讓人調整聲音大小呢？

上網查了一下 HTML5 的音源播放方式，調整一下原始的 Script，動態移除舊的 Flash Player 播放器，並動態加入 HTML5 Audio 播放器，該音源播放器能夠調整音訊大小聲。加入幾行 Script 處理。

var player = $('<audio controls autoplay src="' + audioUrl + '">Your browser does not support the audio tag.</audio>');
parent.append(player);
embed.remove();