最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

day01: JS Drum Kit

XAMPP下载 admin 905浏览 0评论

QQ截图20181015155708

 

 使用者操作需求
當按下按鍵 A,S,D,F,G,H,K,L 按鍵時,播放對應的不同音效,頁面上對應的區塊會增添短暫樣式

技術重點
鍵盤事件 keydown
HTML5資料屬性data-*
取得鍵盤資訊 e.keyCode
增添樣式 ClassList.add(”)
取消樣式 使用 forEach() addEventListener 監聽每個 .key
將物件或字串轉成陣列的方法 Array.form()
流程步驟
先定義好 HTML標籤 data-key屬性的值
在 window上添加鍵盤 keydown事件,取得按鍵 keyCode
使用 querySelector選取對應的 audio data-key屬性的值並且添加 play()
用同樣的方式 querySelector取得對應的 div data-key 並且添加 .playing樣式
為所有 .key添加監聽 transitionened事件,抓出改變的樣式區塊將其去除該樣式
範例語法備註
[ HTML5 Audio ]
HTML5標籤<audio>用於指定音源檔,增加controls屬性會有基本樣式

<audio data-key=”65″ src=”sounds/clap.wav”></audio>
透過javascript控制

audio.currentTime = 0;
audio.play();
audioideo.play() 進行播放影片/音源
audioideo.currentTime=”seconds” 設置當前影片/音源的位置(以秒計)
範例中連續快速的音效用法:
添加play()播放音效時,需要等到音效結束,才能播放下一個音效,無法快速連續播放
可以在前面添加 currentTime = 0 設置音效當前位置為0秒,就可以狂按了

[ HTML5 data-* ]
HTML5資料屬性data-* 其中的*就是一個可以自定義的名稱,可添加自己需要的值
例如:data-name=”yellow” or data-item=”123″

// div上面
<div data-key=”65″ class=”key”>
// audio上面
<audio data-key=”65″ src=”sounds/clap.wav”></audio>
透過javascript控制
之後會講到HTMLElement.dataset
範例裡面是用選取器,抓取HTML標籤的方式,並且加上ES6變數寫法

const audio = document.querySelector(`audio[data-key=”${e.keyCode}”]`);
[ element.classList ]
反回元件的class值(陣列),如果沒有就回傳空值
範例中使用add()以及remove()方法

key.classList.add(‘playing’);
classList.add(‘aaa’, ‘bbb’, ‘ccc’); 新增多個className
classList.remove(‘aaa’, ‘bbb’, ‘ccc’); 移除多個className
如果已經存在/不存在的className則會被忽略。

[ arr.prototype.forEach() ]
跟for迴圈很像,單純執行每個陣列內的物件或值,不會額外回傳值

// 如果使用jQuery keys.addEventListener 是無法達成每個key都添加的
keys.forEach( key => key.addEventListener(‘transitionend’, removeTransition));
範例中使用forEach為每個key增加監聽事件
arr.forEach(function(item, index, array)

item物件,index索引,array全部陣列

[ transitionend 事件 ]
在CSS完成transition後會觸發此事件
在這裡可以使用e.propertyName看到改變的屬性名稱

function removeTransition(e) {
if (e.propertyName !== ‘transform’) return;
e.target.classList.remove(‘playing’);
}
在範例中發生 transition樣式屬性不只一個(box-shadow, transform, border-color)會出發3次,
所以增加判斷 if(e.propertyName !== ‘transform’) return;使每次按鍵事件觸發後只去除一次樣式

[ Array.form() ]
將物件或字串轉成陣列的方法

const keys = Array.from(document.querySelectorAll(‘.key’));
querySelectorAll 反為的是nodeList 而不是Array,
而nodeList 會少很多array能用的方法。
在這裡不使用也一樣能運作,只是可能在其他瀏覽器版本會有錯誤出現

 

转载请注明:XAMPP中文组官网 » day01: JS Drum Kit

您必须 登录 才能发表评论!