HTML5 audio 標籤方法和函數API介紹

發表於 2019-07-29 由 sairwolf

參考網址：
HTML5 audio 標籤方法和函數API介紹

文章目录：

  • audio常用属性

  • audio音乐格式的支持

  • audio属性

  • 参数说明

最近在搞audio方面的h5页面，遇到一些坑，希望这篇文章对大家有所帮助。

audio常用属性

那么首先来看一下audio标签中的一些常用属性：

属性 属性值 注释
src url 播放的音乐的url地址（火狐只支持ogg的音乐，而IE9只支持MP3格式的音乐。chrome貌似全支持）
preload preload 预加载（在页面被加载时进行加载或者说缓冲音频），如果使用了autoplay的话那么该属性失效。
loop loop 循环播放
controls controls 是否显示默认控制条（控制按钮）
autoplay autoplay 自动播放

audio音乐格式的支持

来看下对于音乐格式的支持：

音频格式 Chrome Firefox IE9 Opera Safari
OGG 支持 支持 支持 不支持 不支持
MP3 支持 不支持 支持 不支持 支持
WAV 不支持 支持 不支持 支持 不支

audio可通过new来创建。也可以通过用document来获取。

//通过new关键字来创建Audio对象
var Music = new Audio("test.mp3");
//通过document来获取已经存在的Audio对象
var Music = document.getElementById("audio");
//当然这里也可以使用document.getElementsByClassName('className')等其他的方法来获取。
然后我们来看下api所提供的对audio标签操作的一些属性和方法

audio属性

属性 注释
duration 获取媒体文件的总时长，以s为单位，如果无法获取，返回NaN
paused 如果媒体文件被暂停，那么paused属性返回true，反之则返回false
ended 如果媒体文件播放完毕返回true
muted 用来获取或设置静音状态。值为boolean
volume 控制音量的属性值为0-1;0为音量最小，1为音量最大
startTime 返回起始播放时间
error 返回错误代码，为uull的时候为正常。否则可以通过Music.error.code来获取具体的错误代码：
1.用户终止 2.网络错误 3.解码错误 4.URL无效
currentTime 用来获取或控制当前播放的时间，单位为s。
currentSrc 以字符串形式返回正在播放或已加载的文件

那么来看下这边常用的控制用的函数：

函数 作用
load() 加载音频、视频软件
play() 加载并播放音频、视频文件或重新播放暂停的的音频、视频
pause() 暂停出于播放状态的音频、视频文件
canPlayType(obj) 测试是否支持给定的Mini类型的文件

参数说明

关于audio标签API中的常用事件。
首先绑定事件的话可以通过js中的addEventListener方法来绑定事件。
Music.addEventListener(string:事件类型/名称,function:具体事件促发时的执行,boolean:是否使用捕捉,默认为false);

1、type:String 事件的类型。
2、listener:Function 侦听到事件后处理事件的函数。 此函数必须接受 Event 对象作为其唯一的参数，并且不能返回任何结果，如以下示例所示： 访问修饰符 function 函数名(evt:Event):void
3、useCapture:Boolean (default = false)

这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段：捕获阶段、目标阶段和冒泡阶段。顺序为：捕获阶段(根节点到子节点检查是否调用了监听 函数)→目标阶段(目标本身)→冒泡阶段(目标本身到根节点)。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。 如果将 useCapture 设置为 true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。 如果useCapture 为 false，则侦听器只在目标或冒泡阶段处理事件。

要在所有三个阶段都侦听事件，请调用两次 addEventListener，一次将 useCapture 设置为 true，第二次再将useCapture 设置为 false。

常用audio的事件：

事件名称 事件作用
loadstart 客户端开始请求数据
progress 客户端正在请求数据（或者说正在缓冲）
play play()和autoplay播放时
pause pause()方法促发时
ended 当前播放结束
timeupdate 当前播放时间发生改变的时候。播放中常用的时间处理哦
canplaythrough 歌曲已经载入完全完成
canplay 缓冲至目前可播放状态。
發表於 程式設計 | 發表迴響

HTML5 audio 如何實現播放多個MP3音頻

發表於 2019-07-29 由 sairwolf

參考網址：
HTML5 audio 如何實現播放多個MP3音頻
  

<div id="audioBox"> 
<script type="text/javascript"> 
window.onload = function(){ 
var arr = ["http://www.lmlblog.com/blog/bozhao/images/believe.mp3","http://www.lmlblog.com/blog/bozhao/images/shui.mp3"];               //把需要播放的歌曲從後往前排，這裏已添加兩首音樂，可繼續添加多個音樂 
var myAudio = new Audio(); 
myAudio.preload = true; 
myAudio.controls = true; 
myAudio.src = arr.pop();         //每次讀數組最後一個元素 
myAudio.addEventListener(‘ended‘, playEndedHandler, false); 
myAudio.play(); 
document.getElementById("audioBox").appendChild(myAudio); 
myAudio.loop = false;//禁止循環，否則無法觸發ended事件 
function playEndedHandler(){ 
myAudio.src = arr.pop(); 
myAudio.play(); 
console.log(arr.length); 
!arr.length && myAudio.removeEventListener(‘ended‘,playEndedHandler,false);//只有一個元素時解除綁定 
} 
} 
</script> 
</div>

 

發表於 程式設計 | 發表迴響

wordpress 檔案權限

發表於 2019-07-20 由 sairwolf

參考網址：http://benjr.tw/10912 

root@ubuntu:~# ll -a /var/www/html
total 196
drwxr-xr-x  5 root       root      4096 Oct 30 23:24 ./
drwxr-xr-x  3 root       root      4096 Oct 30 23:23 ../
-rw-rw-r--  1 root       www-data     0 Oct 31 00:11 .htaccess
-rw-r--r--  1 root       root       418 Sep 24  2013 index.php
-rw-r--r--  1 root       root     19935 Jan  2  2017 license.txt
-rw-r--r--  1 root       root      7413 Dec 12  2016 readme.html
-rw-r--r--  1 root       root      5447 Sep 27  2016 wp-activate.php
drwxr-xr-x  9 www-data   www-data  4096 Sep 19 14:21 wp-admin/
-rw-r--r--  1 root       root       364 Dec 19  2015 wp-blog-header.php
-rw-r--r--  1 root       root      1627 Aug 29  2016 wp-comments-post.php
-r--r-----  1 root       www-data  3273 Oct 30 23:23 wp-config.php
drwxrwxr-x  5 root       www-data  4096 Oct 30 23:40 wp-content/
-rw-r--r--  1 root       root      3286 May 24  2015 wp-cron.php
drwxr-xr-x 18 root       root     12288 Sep 19 14:21 wp-includes/
-rw-r--r--  1 root       root      2422 Nov 20  2016 wp-links-opml.php
-rw-r--r--  1 root       root      3301 Oct 24  2016 wp-load.php
-rw-r--r--  1 root       root     34327 May 12 10:12 wp-login.php
-rw-r--r--  1 root       root      8048 Jan 10  2017 wp-mail.php
-rw-r--r--  1 root       root     16200 Apr  6  2017 wp-settings.php
-rw-r--r--  1 root       root     29924 Jan 24  2017 wp-signup.php
-rw-r--r--  1 root       root      4513 Oct 14  2016 wp-trackback.php
-rw-r--r--  1 root       root      3065 Aug 31  2016 xmlrpc.php
root@ubuntu:~# ll /var/www/html/wp-content/
total 24
drwxrwxr-x 5 root www-data 4096 Oct 30 23:40 ./
drwxr-xr-x 5 root root     4096 Oct 30 23:24 ../
-rw-rw-r-- 1 root www-data   28 Jan  8  2012 index.php
drwxrwxr-x 3 root www-data 4096 Oct 31 00:07 plugins/
drwxrwxr-x 5 root www-data 4096 Sep 19 14:21 themes/
drwxrwxr-x 2 root www-data 4096 Oct 30 23:25 uploads/

 

發表於 軟體使用 | 發表迴響

scratch 參考網站

發表於 2019-07-18 由 sairwolf

參考網址：進學國小資訊組

發表於 程式設計 | 發表迴響

樹莓派外殻 raspberry

發表於 2019-07-18 由 sairwolf

參考網址：taobao

讓樹莓派清涼一下

 

發表於 硬體維修 | 發表迴響

ssh 免密碼設定失敗原因總結

發表於 2019-07-14 由 sairwolf

參考網址：itread

ssh 免密碼設定失敗原因總結。

先複習一下設定ssh免密碼操作的步驟:

進入主目錄

cd

生成公鑰

ssh-keygen -t rsa -P '' (注:最後是二個單引號,表示不設定密碼)

然後分發公鑰到目標機器

ssh-copy-id -i ~/.ssh/id_rsa.pub 使用者名稱@對方機器IP (注意不要忘記了引數-i)

注:ssh-copy-id -i 是最簡單的辦法,如果不用這個,就得分二個步驟:

a) 先scp 將本機的id_rsa.pub複製到對方機器的.ssh目錄下

b) 在對方機器上執行 cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys 匯入公鑰

 

上面的操作完成後,就可以用 ssh 對方機器IP 來測試了,順利的話,應該不會提示輸入密碼。

 

如果失敗,有可能是以下原因:

1、許可權問題

.ssh目錄,以及/home/當前使用者 需要700許可權,參考以下操作調整

sudo chmod 700 ~/.ssh

sudo chmod 700 /home/當前使用者

.ssh目錄下的authorized_keys檔案需要600或644許可權,參考以下操作調整

sudo chmod 600 ~/.ssh/authorized_keys

2、StrictModes問題

編輯

sudo vi /etc/ssh/sshd_config

找到

#StrictModes yes

改成

StrictModes no

如果還不行,可以用ssh -vvv 目標機器ip 檢視詳情,根據輸出內容具體問題具體分析了

【另一個參考網站】matt-u
StrictModes no   #修改为no,默认为yes.如果不修改用key登陆是出现server refused our key(如果StrictModes为yes必需保证存放公钥的文件夹的拥有与登陆用户名是相同的.“StrictModes”设置ssh在接收登录请求之前是否检查用户家目录和rhosts文件的权限和所有权。这通常是必要的，因为新手经常会把自己的目录和文件设成任何人都有写权限。) 

之后重新启动ssh服务:/etc/init.d/ssh restart 

 

【結論】
server端：120.116.xxx.xxx
StrictModes no
client端下指令時 ssh sa@120.116.xxx.xxx -p808
~/.ssh/authorized_keys <== 檔案為sa的檔案(即使sa為0:0位置仍是/home/sa/.ssh)

client端：163.26.xxx.xxx
複製公鑰到對方主機
ssh-copy-id -i ~/.ssh/id_rsa.pub sa@對方機器IP  -p808 (注意不要忘記了引數-i) 
下指令時 ssh sa@120.116.xxx.xxx -p808
因 sa為(0:0)所以會去讀 root/.ssh/id_rsa 及 id_rsa.pub
所以要把/home/sa/.ssh 的檔案複製到/root/.ssh

使用習慣：
client 端用root權限跑，因為還需設定crontab
server用sa權限認證，比較安全。

再次總結
client 端用root權限跑，所以先切換成root身分，再下ssh-copy-id -i ~/.ssh/id_rsa.pub sa@對方機器IP  -p808 (注意不要忘記了引數-i)
會把client端root下.ssh/id_rsa.pub檔附加到server端sa的主目錄下.ssh/authorized_keys

發表於 Linux系統 | 發表迴響

sport 225 HP ProLiant DL380 G7 伺服器

發表於 2019-07-11 由 sairwolf

參考網址：https://www.pcstore.com.tw/kusobox/M07016811.htm
HP 產品支援中心

CPU IntelR XeonR Processor E5620 (2.40 GHz, 12MB L3 Cache, 80 Watts,DDR3-1066,HT Turbo 1/1/2/2) (可支援兩顆CPU)
晶片組(chipset) Intel® 5520 Chipset
記憶體(內建) 4 GB (2 x 2 GB) DDR3-1333 MHz Registered (RDIMM)
記憶體容量 最大記憶體容量 : 384GB(12x 32G) (18個 DIMM插槽 / 已使用二個) DDR3-1333 MHz Registered (RDIMM)
顯示晶片 內建Integrated ATI ES1000, 64MB video standard
磁碟控制介面 內建 HP Smart Array P410 /256MB Controller (RAID 0/1/1+0/5/5+0) (Transfer rate: up to 3Gb/s)
硬碟擴充方式 支援 8 個 2.5" SAS/SATA 硬碟介面– 注意須使用【原廠】硬碟，有附熱抽盒。
網路介面 2組10/100/1000Mbps雙連接埠多功能Gigabit 網路介面，支援Wake on LAN(NC382i)
光碟機/軟碟機 內建DVD ROM / 無軟碟機
I/O 插槽(Slot) 支援6個PCI-E插槽
I/O 輸出入埠 內建1個序列埠,5個USB萬用串列埠(front*2+rear*2+internaal*1),1個鍵盤PS/2埠,1個滑鼠PS/2埠,2個顯示埠, 2個RJ-45網路埠,1個SD slot,1個iLO 2 port
遠端管理 HP ProLiant Onboard Administrator Lights-Out 3
輸入裝置 選購
擴充隔間(Bay) 標準 8 個 2.5" SAS 硬碟空間 。目前2.5" SAS最大容量可達 16TB (16x 1TB) (可加買套件擴充到裝16個2.5" SAS硬碟)
主機型態 機架式(2U), (3.5 in/8.89 cm)
電源供應器 電源供應器：460W*1
保固年限 三年零件,三年人工,三年到府支援

HP ProLiant DL380 G7 伺服器擁有更高的彈性與效能、企業級的開機運作時間與 HP Insight Control 管理能力、雙插座 Intel® Xeon® 效能以及 2U 密度，可供多種應用軟體使用，持續展現固有的出色工程技術。

 

更佳的效能與耐用性，適合要求嚴苛的水平延伸式應用軟體
‧搭配 Intel® Xeon® 處理器 5600 系列提供更高的效能、更完美的電源效率以及更佳的適應性： Intel QuickPath，整合式記憶體控制器，Turbo Boost，智慧電源技術與 Trusted Execution Technology。
‧高達 192GB 寄存式記憶體 DIMMS (高達 48GB 非緩衝式)： 記憶體緩衝、更迅速的記憶體速度、4：1 記憶體置入與更高的記憶體數量，可協助需要大量記憶體的應用軟體運作。
‧Advanced ECC 記憶體能修正發生在 DIMM 上單一 DRAM 晶片中的 4 位元記憶體錯誤。 鏡射記憶體防護功能可在不影響記憶體系統效能的情況下，因應無法修正的記憶體錯誤。 線上記憶體備援功能，能夠為意外停機提供額外的防護。
‧內嵌式 Smart Array RAID 控制器、攜帶式電池備援寫入快取與 RAID 6 附件，能夠讓資料防護能力更完備。 寫入快取可提升磁碟效能。
‧Serial Attached SCSI (SAS)： 搭配高達 16 台 SAS 磁碟機與全新內嵌式 Smart Array RAID 控制器，您可以更迅速地存取資料並提升儲存頻寬，實現最頂尖的儲存效能。

智慧型、彈性十足的系統，可因應複雜、動態的環境
‧Insight Control ─ 基本基礎架構管理作業，可加速伺服器配置，主動管理運作狀況，提供最佳化電源管理，而且控管功能不受地點限制 ─ 是高效能機種的標準配備。
‧Integrated Lights-Out (iLO) 能夠透過標準的網路伺瀏覽器提供威力強大、以硬體為基礎的遠端管理與控制功能，省下寶貴的 IT 人力資源。
‧可以透過 SmartStart、Rapid Deployment Pack、PXE 與 ROM-Based Setup Utility (RBSU) 等工具簡化伺服器的架構與配置作業。
‧整合式 VMware 與 XenServer 虛擬化技術； 內部 USB 和 SD 插槽。
‧Systems Insight Display： 伺服器前端配備堅固耐用的滑出式系統診斷顯示器，上面可輕易地找到疑難排解資訊，節省管理者時間。

提供獨步業界的能源效益
‧因應您更高的電源需求，提供業界最高效益並符合 Climate Savers Computing Gold、80PLUS Gold 規定，更為 Energy Star for Servers 安規創立新標準。
‧尺寸適當的 ProLiant 電源供應器，從 460 瓦 @ 92% 效率、750 瓦 @ 92% 效率，乃至於 1200 瓦 @ 94% 效率應有儘有。 請務必運用 HP Power Calculator 選擇最適合的電源供應器。
‧HP 獨特的 Thermal Logic Technologies，能夠提供智慧型電源 & 冷卻功能，搭配「大量感應器」，可管理並調整全伺服器的電源與冷卻情形，持續提供最高的效能與高效益的冷卻能力。
‧運用 Insight Control 與動態用電控制 (Dynamic Power Capping) 功能，容量可提升 3 倍。 動態用電控制功能讓您能夠規劃伺服器電源使用層級，不僅不影響效能，同時仍然能夠保護機架內的斷路器。

精巧的設計，不僅可靠，更可輕鬆擁有
‧簡潔、無需工具、機械式的設計可提升可靠性，且無需工具的模組化元件、熱抽換備援功能可簡化架構與維修作業，維修更迅速；而最少的纜線數量可協助您輕鬆存取元件。
‧DL380 G7 配備通用免工具滑軌，能夠迅速安裝；快速佈署桿也可提供迅速的伺服器存取能力。 兩手操作均順手的纜線管理機臂附件，能夠提供配線彈性與管理能力，協助迅速存取伺服器。
‧以伺服器共通性為重心，透過通用磁碟、Smart Array 控制器與通用電源供應器和元件，簡化備品儲備，提升 IT 生產力與管理能力。
‧以 ROM 為基礎的架構與管理功能，不僅可提升運作時間還可簡化架構，另外提供獨立的系統狀態監測功能。

企業端SAS？消費級SATA？

發表於 硬體維修 | 發表迴響

臺南市自造教育及科技中心

發表於 2019-07-10 由 sairwolf

參考網址：

臺南市自造教育及科技中心

http://maker.tn.edu.tw/

發表於 教學科技 | 發表迴響

108課綱科技領域-資訊科技教學資源網

發表於 2019-07-10 由 sairwolf

參考網址：http://ms2.ctjh.ntpc.edu.tw/~luti/108it-class.html

發表於 教學科技 | 發表迴響

另一套遠端桌面程式

發表於 2019-07-09 由 sairwolf

參考網址：https://mobaxterm.mobatek.net/

MobaXterm X server and SSH client
Enhanced terminal for Windows with X11 server, tabbed SSH client, network tools and much more

發表於 軟體使用 | 發表迴響