可以瀏覽粉絲專頁看不到貼文，要測試 Apps 必須從該 Apps 內建立
—
從 Apps 內的 角色 → 測試帳戶 即可新增測試帳號
|
1 2 |
xzaezrnkqo_1546392091@tfbnw.net Aa123456- |
—
|
1 2 3 4 |
Name Aiden Alcbabgiaaacj Thurnstein User ID 100032127911130 Login email mgvlpyb_thurnstein_1546391770@tfbnw.net Login password lz1ac1bsimr |
—
—
—
浮浮沉沉也是浮動，希望沉靜下來後只留下美好
—
—
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hoyo 教你 Web Audio API – 02</title> </head> <body> <audio src="https://playx.fun/stream/AgxAN:DXX1rB" id="audio" style="display: none;"></audio> <button type="button" onclick="play()">播放</button> <button type="button" onclick="pause()">暫停</button> <button type="button" onclick="volume(0)">靜音</button> <button type="button" onclick="volume(0.5)">50% 音量</button> <button type="button" onclick="volume(1)">最大音量</button> <script> var audio = document.getElementById("audio"); // 播放 function play(){ audio.play(); } // 暫停 function pause(){ audio.pause(); } // 音量大小 function volume(val){ audio.volume = val; } </script> </body> </html> |
現成的檔案在這裡 02_audio
—
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hoyo 教你 Web Audio API – 03</title> </head> <body> <audio src="https://playx.fun/stream/AgxAN:DXX1rB" id="audio" style="display: none;"></audio> <button type="button" onclick="play()">播放</button> <button type="button" onclick="pause()">暫停</button> <label style="width: 100%;"><input type="range" class="volumeGain" min="0" max="100" step="1" value="50"></label> <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script> var audio = document.getElementById("audio"); // 播放 function play(){ audio.play(); } // 暫停 function pause(){ audio.pause(); } // 取得音量滑軌 控制音量 $('.volumeGain').on('input change', function(){ var val = $(this).val(); audio.volume = val / 100; }); </script> </body> </html> |
現成的檔案在這裡 03_audio
音量處理好了，所以進度也可以照樣造句？事情當然沒有這麼單純…
|
1 |
input range 預設值為 50 代表音量是 50% 但是實際上這裡有 bug 就給同學當作回家作業 |
—
audio.currentTime即可得到播放進度，例如增加下列程式碼即可多一個查詢進度的按鈕，單位為秒
|
1 2 3 4 5 6 |
<button type="button" onclick="getCurrentTime()">播放進度</button> <script> function getCurrentTime(){ alert(audio.currentTime); } </script> |
指定數值即可跳轉，例如增加以下程式碼就可以立刻跳到 30 秒處
|
1 2 3 4 5 6 |
<button type="button" onclick="setCurrentTime(30)">跳到 30 秒處</button> <script> function setCurrentTime(val){ audio.currentTime = val; } </script> |
目前的進度檔案 04_audio
—
用功的同學綜合上面了解的資訊可以先嘗試自行做做看，和 Hoyo 一樣偷懶的同學就直接往下看
這裡的坑是，進度本身會動，指定進度就是控制滑軌，可惜兩者會打架，所以播放進度和控制必須分開做，播放進度可以使用 CSS 填色或是也用一個 <input type=”range”>，控制進度當然就是 <input type=”range”>，下面因為懶惰所以就用兩個 range
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hoyo 教你 Web Audio API – 05</title> </head> <body> <audio src="https://playx.fun/stream/AgxAN:DXX1rB" id="audio" style="display: none;"></audio> <button type="button" onclick="play()">播放</button> <button type="button" onclick="pause()">暫停</button> <label style="width: 100%;"><input type="range" class="volumeGain" min="0" max="100" step="1" value="50"></label> <p>播放進度：</p> <label><input type="range" class="playTime" id="getPlayTime" min="0" value="0" style="width: 100%;"></label> <label><input type="range" class="playTime" id="setPlayTime" min="0" value="0" style="width: 100%;"></label> <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script> var audio = document.getElementById("audio"); // 播放 function play(){ audio.play(); // 將播放進度條的最大值設定為歌曲長度 $('.playTime').attr('max', audio.duration); } // 暫停 function pause(){ audio.pause(); } // 取得音量滑軌 控制音量 $('.volumeGain').on('input change', function(){ var val = $(this).val(); audio.volume = val / 100; }); // function getCurrentTime(){ alert(audio.currentTime); } // function setCurrentTime(val){ audio.currentTime = val; } // 播放時間異動時 執行功能 audio.ontimeupdate = function(){ $('#getPlayTime').val(audio.currentTime); }; // 變更播放進度時 $('#setPlayTime').on('change', function(){ var val = $(this).val(); audio.currentTime = val; }); </script> </body> </html> |
完成檔案 05_audio
—
至此對於 <audio> 的基礎控制已經完成，不過實務上使用還是有很多問題，相信同學也有測試出來，例如音樂還沒載入就播放，或是播放中想要上一頁或切換網頁卡住問題，這些後面會講到，不過接下來是美化播放介面，不是用醜醜的按鈕了
—
Hoyo 教你 Web Audio API 系列，目標是教同學如何建立自己的音樂串流平台
—
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hoyo 教你 Web Audio API – 01</title> </head> <body> <audio src="https://playx.fun/stream/AgxAN:DXX1rB" controls=""></audio> </body> </html> |
雙擊開啟 audio.html 看到類似這樣的網頁，並且點選播放可以順利聽到音樂就成功了
—
Hoyo 相信大多數的網頁畫面都和上面那張不同，應該比較接近下面這樣
除了畫面長相不同之外還多了下載按鈕，當然也有可能長這樣
—
為了統一播放介面所以接下來就必須 Hoyo 教你 Web Audio API – 02. 簡易播放介面
—
開啟 Microsoft\Templates\Normal.dotm → 顯示「開發人員」主索引
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Public WithEvents App As Application Private Sub Document_Open() Set App = Application End Sub Private Sub App_DocumentOpen(ByVal Doc As Document) Doc.ActiveWindow.ActivePane.View.Zoom.Percentage = 120 End Sub Private Sub Document_New() Set App = Application End Sub Private Sub App_DocumentNew(ByVal Doc As Document) Doc.ActiveWindow.ActivePane.View.Zoom.Percentage = 120 End Sub |
官網的資料是錯的
—
Hoyo 的 Vigor2920Vn 掛了，之前移除 WiFi 模組又活了一陣子 (Vigor2920Vn 使用心得備註)，不過這幾天真的不行了，不到一小時就重新開機，只好換回 Buffalo WZR-600DHP2 (Buffalo WZR-600DHP2 韌體刷 dd-wrt)
不過原有的 600DHP2 和 2920Vn 功能上還是有一些落差，首先更新了韌體，接下來就是
本篇講的是阻擋廣告網址達到封鎖廣告目的
—
設定網址 DNS 對應無效 IP ，環境介紹
|
1 2 3 |
路由器型號 Buffalo WZR-600DHP2 韌體版本 DD-WRT v3.0-r36698M std (08/22/18) Kernel VersionLinux 4.4.151-rc1 #3736 Wed Aug 22 10:05:10 CEST 2018 armv7l |
進入 DD-WRT → 伺服器 → 伺服器，根據資料將廣告網址或網域對應到無效或是特殊 IP 即可達到不顯示廣告效果
|
1 2 3 4 5 |
address=/.googleadservices.com/192.168.0.3 address=/.doubleclick.net/192.168.0.3 address=/.googlesyndication.com/192.168.0.3 address=/vbtrax.com/192.168.0.3 |
最後必須空一行，編輯器不讓我多一個空白行，使用時多注意
輸入完成後點選「儲存重啟」即可
—
如果指定的 IP 是 127.0.0.1 那當然就不需要做這個動作，不過出現一個找不到網頁之類的錯誤訊息在原來廣告的區塊內，看了也不自在，所以 Hoyo 的處理是轉到自己的主機後給一個自定義的網頁
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<VirtualHost *:443> DocumentRoot "/WEBSite/192.168.0.3" ServerName googleads.g.doubleclick.net ServerAlias www.googleadservices.com SSLEngine on SSLProtocol all -SSLv2 SSLCipherSuite HIGH:MEDIUM:!aNULL:!MD5:!SEED:!IDEA SSLCertificateFile /etc/letsencrypt/live/hoyo.idv.tw/cert.pem SSLCertificateChainFile /etc/letsencrypt/live/hoyo.idv.tw/fullchain.pem SSLCertificateKeyFile /etc/letsencrypt/live/hoyo.idv.tw/privkey.pem <Directory "/WEBSite/192.168.0.3"> AllowOverride All Require all granted </Directory> </VirtualHost> |
—
.htaccess
|
1 2 3 4 |
RewriteEngine on ErrorDocument 404 /index.html RewriteRule (.*) index.html [L] RewriteRule ^(.*)/(.*)$ index.html [L] |
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <style> *{height:100%;} </style> </head> <body style="background-color: #eee; overflow: hidden;"> <div style="height:50%"></div> <div style="text-align: center;height:24px;">這裡是廣告</div> </body> </html> |
完成圖
—
注意選項陷阱避免被入侵
記得將 Allow Any Remote IP 關閉，並且設定成內部 IP
預設為啟用，並且 Telnet 管理為關閉，不過有興趣以及有環境的可以測試看看，很可怕 …
你也想要用！？
到這個頁面主要是因為已經把硬體規格列出，因為 firmware 是差不多的，所以決定效能、功能多寡的就是硬體了
例如 Hoyo 的 Buffalo WZR-600DHP2 就是一個性價比優秀的產品，雖然 Buffalo 和 DD-WRT 合作，可惜現在台灣已經不代理了
—
這裡有更進階的用法
可是使用 DNS 誤傷太大，而且只指定目錄名稱，話雖如此 Hoyo 還是設定這個下去了 ….
|
1 |
address=/pagead/192.168.0.3 |
—