[Golang] GopherJS DOM Example - Play Sound on Click Event

Introduction

It is really cool to run Go code in the browser. GopherJS is a compiler from Go to JavaScript, which makes this possible. In this post, we will give a simple example of DOM manipulation in Go program. This example shows how to play sound when a HTML element is clicked. If you are not familiar with basic DOM manipulation in Go, read the posts in GopherJS DOM Example series first.

Install GopherJS and DOM bindings

Run the following command to install GopherJS and GopherJS bindings for the JavaScript DOM APIs:

$ go get -u github.com/gopherjs/gopherjs
$ go get -u honnef.co/go/js/dom

Source Code

First we write a simple HTML for our demo:

index.html | repository | view raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!doctype html>
<html>
<head>
  <title>GopherJS DOM example - Play Sound on Click Event</title>
</head>
<body>

<button id="foo" type="button">Click Me to Play Sound</button>
<audio id="audio">
  <source src="Wat_Metta_Buddha_Qualities.mp3" type="audio/mpeg">
Your browser does not support this audio format.
</audio>

<script src="demo.js"></script>
</body>
</html>

We will bind a onclick event handler to the button element whose id is foo. When users click the button, the play() method of HTML audio element will be called to play the sound of the mp3 file, which is Wat_Metta_Buddha_Qualities.mp3 in this example.

play.go | repository | view raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
package main

import "honnef.co/go/js/dom"

func main() {
	d := dom.GetWindow().Document()

	foo := d.GetElementByID("foo").(*dom.HTMLButtonElement)
	foo.AddEventListener("click", false, func(event dom.Event) {
		a := d.GetElementByID("audio").(*dom.HTMLAudioElement)
		// already specify source in audio tag, no need to set src
		//a.SetAttribute("src", "Wat_Metta_Buddha_Qualities.mp3")
		a.Play()
	})
}

Compile the Go code to JavaScript by:

$ gopherjs build play.go -o demo.js

Put demo.js together with the index.html and the mp3 file in the same directory. Open the index.html with your browser. Click the button and you will hear the sound!

Tested on: Ubuntu Linux 15.10, Go 1.5.3.

Powered by Github Pages, Pelican, pyScss.