This repository was archived by the owner on Feb 12, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathtutorial-13-buzzer.html
More file actions
64 lines (63 loc) · 20.9 KB
/
Copy pathtutorial-13-buzzer.html
File metadata and controls
64 lines (63 loc) · 20.9 KB
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 lang="zh-TW"> <head> <meta charset="UTF-8"> <meta http-equiv="pragma" content="no-cache"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="author" content="webduino.io"> <meta name="copyright" content="webduino.io"> <meta itemprop="name" content="webduino.io"> <link rel="icon" href="../img/layout/favicon.ico" type="image/x-icon"> <title>教學範例 13：蜂鳴器播放自製音樂 :::: Webduino = Web × Arduino</title> <meta name="description" content="蜂鳴器是一個可以產生聲音信號的裝置，使用直流電供電，接通訊號源之後，音訊信號電流通過電磁線圈，使電磁線圈產生磁場，造成 振動膜片週期性地振動發聲，而 Webduino 更可以藉由 HTML5 Attribute 來填入音符代碼，每個代碼都會對應到一個數值，這個數值相對應蜂鳴器聲音的頻率，因此藉由純粹的 HTML5 或 javascript 就可以編輯音樂，透過蜂鳴器發聲。"> <meta itemprop="description" content="蜂鳴器是一個可以產生聲音信號的裝置，使用直流電供電，接通訊號源之後，音訊信號電流通過電磁線圈，使電磁線圈產生磁場，造成 振動膜片週期性地振動發聲，而 Webduino 更可以藉由 HTML5 Attribute 來填入音符代碼，每個代碼都會對應到一個數值，這個數值相對應蜂鳴器聲音的頻率，因此藉由純粹的 HTML5 或 javascript 就可以編輯音樂，透過蜂鳴器發聲。"> <meta property="og:description" content="蜂鳴器是一個可以產生聲音信號的裝置，使用直流電供電，接通訊號源之後，音訊信號電流通過電磁線圈，使電磁線圈產生磁場，造成 振動膜片週期性地振動發聲，而 Webduino 更可以藉由 HTML5 Attribute 來填入音符代碼，每個代碼都會對應到一個數值，這個數值相對應蜂鳴器聲音的頻率，因此藉由純粹的 HTML5 或 javascript 就可以編輯音樂，透過蜂鳴器發聲。"> <link rel="canonical" href="https://tutorials.webduino.io/zh-tw/docs/basic/component/buzzer.html"> <meta property="og:title" content="教學範例 13：蜂鳴器播放自製音樂"> <meta property="og:url" content="https://webduino.io/tutorials/tutorial-13-buzzer.html"> <meta property="og:image" content="https://webduino.io/img/tutorials/tutorial-13-01s.jpg"> <meta itemprop="image" content="https://webduino.io/img/tutorials/tutorial-13-01s.jpg"> <script src="../js/lib/jquery.min.js"></script> <script src="../js/lib/jquery.lazyload.min.js"></script> <script src="../js/lib/run_prettify.js"></script> <script src="../js/layout-20171211.js"></script> <script src="../js/tutorials.js"></script> <script src="../js/lib/disqus.js"></script> <link rel="stylesheet" href="../style/css/lib/tomorrow.css"> <link rel="stylesheet" href="../style/css/layout.css"> <link rel="stylesheet" href="../style/css/sub-header.css"> <link rel="stylesheet" href="../style/css/tutorials-content.css"> <link rel="stylesheet" href="../style/css/lib/font-awesome.css"> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-TT4TZ8L');</script> </head> <body> <header class="path-0"> <a class="logo" href="index.html" data-name="layout-header-logo"></a> <div class="mobile-menu"></div> <div class="menu"> <a href="index.html" class="index" data-name="layout-mobile-menu">首頁</a> <a href="tutorials.html" class="tutorials" data-name="layout-mobile-menu">教學範例</a> <a href="buy.html" class="buy" data-name="layout-mobile-menu">產品總覽</a> <a href="activity.html" class="activity" data-name="layout-mobile-menu">課程活動</a> <a href="about.html" class="about" data-name="layout-mobile-men">關於我們</a> <a href="en/index.html" class="english" data-name="layout-mobile-men">English</a> </div> </header> <header class="path-1"> <a class="logo" href="../index.html"></a> <div class="mobile-menu"></div> <div class="menu"> <a href="../index.html" class="index" data-name="layout-menu">首頁</a> <a href="../tutorials.html" class="tutorials" data-name="layout-menu">教學範例</a> <a href="../buy.html" class="buy" data-name="layout-menu">產品總覽</a> <a href="../activity.html" class="activity" data-name="layout-menu">課程活動</a> <a href="../about.html" class="about" data-name="layout-menu">關於我們</a> <a href="../en/index.html" class="english" data-name="layout-menu">English</a> </div> </header> <div class="tutorials-content"> <div class="banner"> </div> <h1>教學範例 13：蜂鳴器播放自製音樂</h1> <p>蜂鳴器是一個可以產生聲音信號的裝置，使用直流電供電，接通訊號源之後，音訊信號電流通過電磁線圈，使電磁線圈產生磁場，造成 振動膜片週期性地振動發聲，而 Webduino 更可以藉由 HTML5 Attribute 來填入音符代碼，每個代碼都會對應到一個數值，這個數值相對應蜂鳴器聲音的頻率，因此藉由純粹的 HTML5 或 javascript 就可以編輯音樂，透過蜂鳴器發聲。</p> <div class="buy-this"> <span>蜂鳴器相關套件：<a href="https://webduino.io/buy/webduino-package-plus.html" target="_blank">Webduino 基本套件 Plus ( 支援馬克 1 號、Fly )</a></span> <span>Webduino 開發板：<a href="https://webduino.io/buy/component-webduino-v1.html" target="_blank">Webduino 馬克一號</a>、<a href="https://webduino.io/buy/component-webduino-fly.html" target="_blank">Webduino Fly</a>、<a href="https://webduino.io/buy/component-webduino-uno-fly.html" target="_blank">Webduino Fly + Arduino UNO</a></span> </div> <h2>範例影片展示</h2> <p>影片對應範例：<a href="https://blockly.webduino.io/?page=tutorials/buzzer-1">https://blockly.webduino.io/?page=tutorials/buzzer-1</a> </p> <p><iframe class="youtube" src="https://www.youtube.com/embed/StNG2NHS240" frameborder="0" allowfullscreen=""></iframe></p> <h2>接線與實作</h2> <p>蜂鳴器在電路板的附近，有標示「+」和「-」的符號，「-」接在開發板的 GND，「+」接在 11 的腳位 ( 其實接反也沒關係 )，可以用杜邦線接出來，如果是馬克 1 號，也可以直接安插在上面。</p> <p>馬克一號接線示意圖：</p> <p><img src="../img/tutorials/tutorial-13-02.jpg"></p> <p>Fly 接線示意圖：</p> <p><img src="../img/tutorials/tutorial-13-02-fly.jpg"></p> <p>實際接線照片：</p> <p><img src="../img/tutorials/tutorial-13-03.jpg"></p> <p><img src="../img/tutorials/tutorial-13-04.jpg"></p> <div class="buy-this"> <span>蜂鳴器相關套件：<a href="https://webduino.io/buy/webduino-package-plus.html" target="_blank">Webduino 基本套件 Plus ( 支援馬克 1 號、Fly )</a></span> <span>Webduino 開發板：<a href="https://webduino.io/buy/component-webduino-v1.html" target="_blank">Webduino 馬克一號</a>、<a href="https://webduino.io/buy/component-webduino-fly.html" target="_blank">Webduino Fly</a>、<a href="https://webduino.io/buy/component-webduino-uno-fly.html" target="_blank">Webduino Fly + Arduino UNO</a></span> </div> <h2>Webduino Blockly 操作解析</h2> <p>打開 Webduino Blockly 編輯工具 ( <a href="https://blockly.webduino.io">https://blockly.webduino.io</a> )，因為這個範例會用網頁「網頁按鈕」來點選不同按鈕播放不同音樂，所以要先點選右上方「網頁互動測試」的按鈕，打開內嵌測試的網頁，用下拉選單選擇「按鈕行為」，這邊的按鈕跟實體的按鈕開關是不一樣的，這邊的按鈕指的是網頁上面的按鈕。</p> <p><img src="../img/tutorials/tutorial-13-05.jpg"></p> <p>把開發板放到編輯畫面裡，填入對應的 Webduino 開發板名稱，開發板內放入蜂鳴器積木，名稱設定為 buzzer，腳位設定為 11。</p> <p><img src="../img/tutorials/tutorial-13-06.jpg"></p> <p>再來建立我們的第一首音樂，放入「建立音樂」的積木，名稱命名為 m1，裏頭擺入音符與節奏，「音符」第一個下拉選單有「無聲、C、CS、D、DS、E、F、FS、G、GS、A、AS、B」，可以想像成鋼琴的黑鍵與白鍵，有 S 的就是黑鍵，第二個下拉選單就是有幾個八度音，這裏可以設定七個八度音，數字越大聲越高，「節奏」就是幾分之一秒，最少可以到 1/10 秒。</p> <p><img src="../img/tutorials/tutorial-13-07.jpg"></p> <p>建立了音樂，接著就設定按下按鈕 1 的事件，當按下按鈕 1，就用 buzzer 播放 m1。</p> <p><img src="../img/tutorials/tutorial-13-08.jpg"></p> <p>除了一個個放入音符和節奏外，也可以直接用輸入的方式，這裏就只是把剛剛的音符與節奏，合併成兩個欄位，如果節奏沒有按照音符數量填寫 ( 如果節奏比較少 )，則多出來的音符就會用最後一個節奏的時間去播放，用這種方式做的第二首音樂 m2，點選按鈕 2 來播放。</p> <p><img src="../img/tutorials/tutorial-13-09.jpg"></p> <p>接著按下按鈕 3 的事件，這裏就用同樣做音樂的方法作首 m3 的音樂，內容就直接選一首資料庫的音樂放入。</p> <p><img src="../img/tutorials/tutorial-13-10.jpg"></p> <p>按鈕 4 綁定停止播放的行為。</p> <p><img src="../img/tutorials/tutorial-13-11.jpg"></p> <p>到這邊大致上已經完成了一個點選按鈕控制播放的蜂鳴器程式積木，但最後一步我們要在按鈕 1 到 3 多加一段停止播放的行為，避免按下按鈕的時候，如果前一首還沒播完，就會重疊在一起播放。</p> <p><img src="../img/tutorials/tutorial-13-12.jpg"></p> <p>完成後，確認開發板上線 ( 點選「<a href="https://webduino.io/device.html">檢查連線狀態</a>」查詢 )，點選紅色的執行按鈕，分別按下不同按鈕，就會聽到蜂鳴器播放出不同的音樂。( 解答：<a href="https://blockly.webduino.io/#-KDEaW-S-kRRaEkkyRGH">https://blockly.webduino.io/#-KDEaW-S-kRRaEkkyRGH</a> )</p> <h2>程式碼解析 ( <a href="https://bin.webduino.io/lihov/edit?html,css,js,output">完整程式碼</a>、<a href="https://webduino.io/device.html">檢查連線狀態</a> )</h2> <p>HTML 的 header 引入 <code>webduino-all.min.js</code>，目的在讓瀏覽器可以支援 WebComponents 以及 Webduino 所有的元件，如果是用 Blockly 編輯工具產生的程式碼，則要額外引入 <code>webduino-blockly.js</code>。</p> <pre><code><script src="https://webduino.io/components/webduino-js/dist/webduino-all.min.js"></script>
<script src="https://webduinoio.github.io/webduino-blockly/webduino-blockly.js"></script>
</code></pre><p>HTML 裡有五個按鈕，分別有各自的 id，屆時就可以由 id 來判斷按下哪顆按鈕。</p> <pre><code><button id="demo-area-05-btn1" class="db5">按鈕 1</button>
<button id="demo-area-05-btn2" class="db5">按鈕 2</button>
<button id="demo-area-05-btn3" class="db5">按鈕 3</button>
<button id="demo-area-05-btn4" class="db5">按鈕 4</button>
<button id="demo-area-05-btn5" class="db5">按鈕 5</button>
</code></pre><p>JavaScript 看起來很多，但實際上很單純，先看到 m1 這首歌，其實就是建立兩個陣列 ( notes 和 tempos )，然後把音符和節奏分別拋到這兩個陣列裡，一開始的程式就是音樂播放的主程式，可以清楚地看到裡面放入了兩個物件，分別是 notes 和 tempos，而這兩個物件內容都是陣列。</p> <pre><code>var buzzer;
var m1;
var m2;
var m3;
function buzzer_music(m) {
var musicNotes = {};
musicNotes.notes = [];
musicNotes.tempos = [];
if(m.length>1){
for(var i=0; i<m.length; i++){
if(Array.isArray(m[i].notes)){
var cn = musicNotes.notes.concat(m[i].notes);
musicNotes.notes = cn;
}else{
musicNotes.notes.push(m[i].notes);
}
if(Array.isArray(m[i].tempos)){
var ct = musicNotes.tempos.concat(m[i].tempos);
musicNotes.tempos = ct;
}else{
musicNotes.tempos.push(m[i].tempos);
}
}
}else{
musicNotes.notes = [m[0].notes];
musicNotes.tempos = [m[0].tempos];
}
return musicNotes;
}
</code></pre><p>接著看到開發板的程式，可以看到我們建立的音樂，就是把一串陣列丟給這首音樂的 notes 和 tempos 物件，如此一來蜂鳴器就會按照這些音符節奏播放。</p> <pre><code>boardReady('', function (board) {
board.samplingInterval = 20;
buzzer = getBuzzer(board, 11);
m1 = buzzer_music([ {notes:"C6",tempos:"3"},{notes:"D6",tempos:"7"},{notes:"E6",tempos:"3"},{notes:"F6",tempos:"7"}]);
document.getElementById("demo-area-05-btn1").addEventListener("click",function(){
buzzer.stop();
buzzer.play(m1.notes, m1.tempos);
});
m2 = buzzer_music([ {notes : ["C6","D6","E6","F6","G6","A6","B6"] , tempos : ["8","8","8","8","8","8","8"] }]);
document.getElementById("demo-area-05-btn2").addEventListener("click",function(){
buzzer.stop();
buzzer.play(m2.notes, m2.tempos);
});
m3 = buzzer_music([ {notes:["E7","E7","0","E7","0","C7","E7","0","G7","0","0","0","G6","0","0","0","C7","0","0","G6","0","0","E6","0","0","A6","0","B6","0","AS6","A6","0","G6","E7","0","G7","A7","0","F7","G7","0","E7","0","C7","D7","B6","0","0","C7","0","0","G6","0","0","E6","0","0","A6","0","B6","0","AS6","A6","0","G6","E7","0","G7","A7","0","F7","G7","0","E7","0","C7","D7","B6","0","0"] , tempos:["8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8"]}]);
document.getElementById("demo-area-05-btn3").addEventListener("click",function(){
buzzer.stop();
buzzer.play(m3.notes, m3.tempos);
});
document.getElementById("demo-area-05-btn4").addEventListener("click",function(){
buzzer.stop();
});
});
</code></pre><p>以上就是利用蜂鳴器和網頁的按鈕，來製作與播放音樂。<br>完整程式碼：<a href="https://bin.webduino.io/lihov/edit?html,css,js,output">https://bin.webduino.io/lihov/edit?html,css,js,output</a><br>解答：<a href="https://blockly.webduino.io/#-KDEaW-S-kRRaEkkyRGH">https://blockly.webduino.io/#-KDEaW-S-kRRaEkkyRGH</a></p> <h2>蜂鳴器的延伸教學：</h2> <p><a href="http://blockly.webduino.io/?lang=zh-hant&page=tutorials/buzzer-2#-KDCNtS1o_l57m9Aq46h">Webduino Blockly 課程 9-2：蜂鳴器播放音樂</a><br><a href="http://blockly.webduino.io/?lang=zh-hant&page=tutorials/buzzer-3#-KDCOHhM5eAHX6GbAkw8">Webduino Blockly 課程 9-3：切換音樂，用蜂鳴器播放</a><br><a href="http://blockly.webduino.io/?lang=zh-hant&page=tutorials/buzzer-4#-KDCOxfqbxJmc3MaY_rg">Webduino Blockly 課程 9-4：蜂鳴器的播放、暫停、停止 ( 按鈕開關控制 ) </a></p> <div class="buy-this"> <span>蜂鳴器相關套件：<a href="https://webduino.io/buy/webduino-package-plus.html" target="_blank">Webduino 基本套件 Plus ( 支援馬克 1 號、Fly )</a></span> <span>Webduino 開發板：<a href="https://webduino.io/buy/component-webduino-v1.html" target="_blank">Webduino 馬克一號</a>、<a href="https://webduino.io/buy/component-webduino-fly.html" target="_blank">Webduino Fly</a>、<a href="https://webduino.io/buy/component-webduino-uno-fly.html" target="_blank">Webduino Fly + Arduino UNO</a></span> </div> <a class="arrow arrow-r pre-next-button" data-name="pre-next-arrow"></a> <a class="arrow arrow-l pre-next-button" data-name="pre-next-arrow"></a> <div class="pre-next"> <div> <div class="pre"></div> <div class="next"></div> </div> </div> <div class="note-chicken"></div> <div class="others"> <i class="fa fa-times note-close-btn"></i> <h5>如果您還想了解更多，可以參考：</h5> <div class="others-link otehrs-read"> 1. 完整教學範例：<a href="https://tutorials.webduino.io" data-name="noteLink">https://tutorials.webduino.io</a> <br> 2. Blockly 教學：<a href="https://goo.gl/h6s7GY" data-name="noteLink">https://goo.gl/h6s7GY</a> <br> 3. 產品總覽：<a href="https://webduino.io/buy.html" target="_blank" data-name="noteLink">https://webduino.io/buy.html <i class="fa fa-share-square-o"></i></a> <br> 4. 露天賣場：<a href="http://goo.gl/0Dj9ip" target="_blank" data-name="noteLink">http://goo.gl/0Dj9ip <i class="fa fa-share-square-o"></i></a> </div> </div> <div class="popup"> <div class="whitebox"> <span class="popup-close">X</span> <img src="https://webduinoio.github.io/tutorials/img/tutorials/boy.png"> <h3>Webduino 全新教學網站上線囉</h3> <p>本篇文章已經有更新的版本，趕快前往閱讀吧！</p> <a href="https://tutorials.webduino.io/" class="popup-new-article new-tutorials go" target="_blank">立即閱讀</a> </div> </div> </div> <div class="disqus"> <div id="disqus_thread"></div> </div> <footer> <div class="w-20 screen-copyright"> <div class="logo"> <a href="index.html"><img src="https://webduino.io/img/layout/webduino-gray.png"></a> <h4>Copyright 2017 | All Rights Reserved. Powered by Webduino</h4> </div> </div> <div class="w-80"> <div class="w-100"> <div class="w-25">關於我們 <ul> <li><a href="https://webduino.io/" target="blank">首頁</a></li> <li><a href="about.html" target="blank">關於我們</a></li> <li><a href="partner.html" target="blank">合作夥伴</a></li> </ul> </div> <div class="w-25">教材 <ul> <li><a href="https://tutorials.webduino.io/" target="blank">學習手冊</a></li> <li><a href="activity.html" target="blank">課程活動</a></li> <li><a href="https://tutorials.webduino.io/zh-tw/docs/faq/index.html" target="blank">常見問題</a></li> </ul> </div> <div class="w-25">硬體產品 <ul> <li><a href="buy.html" target="blank">開發板與電子零件</a></li> <li><a href="http://class.ruten.com.tw/user/index00.php?s=webduino" target="blank">露天賣場</a></li> </ul> </div> <div class="w-25">軟體服務 <ul> <li><a href="https://cloud.webduino.io/" target="blank">雲端平台</a></li> <li><a href="https://blockly.webduino.io/" target="blank">Webduino Blockly 體驗版</a></li> </ul> </div> </div> <div class="w-100"> <hr> </div> <div class="w-100"> <div class="w-50">聯絡我們 <ul> <li>+886 7 3388511</li> <li>[email protected]</li> <li>807 高雄市前鎮區復興四路 12 號 2 樓之 6</li> </ul> </div> <div class="w-50">社群媒體 <div><a href="https://www.facebook.com/webduino" target="blank"><i class="fa fa-facebook"></i></a><a href="https://www.youtube.com/channel/UCUk3U7QZqijQfE-7rAh_INQ" target="blank"><i class="fa fa-youtube"></i></a><a href="https://github.com/webduinoio" target="blank"><i class="fa fa-github"></i></a></div> </div> </div> </div> </footer> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TT4TZ8L" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> </body> </html>