Skip to content

Instantly share code, notes, and snippets.

@skanehira
Created September 29, 2020 23:38
Show Gist options
  • Save skanehira/2ee12b58305b29af55e6de3f1b88e09d to your computer and use it in GitHub Desktop.
Save skanehira/2ee12b58305b29af55e6de3f1b88e09d to your computer and use it in GitHub Desktop.
HTML Audio sample
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"></script>
</head>
<body>
<div id="app">
<button @click="stop">Stop</button>
<button @click="play">Play</button>
</div>
</body>
<script src="index.js"></script>
</html>
const app = new Vue({
el: '#app',
data: {
audio: new Audio(),
},
methods: {
getWav() {
axios.get("/wav", {responseType: "blob"}).then(resp => {
const blob = new Blob([resp.data])
const url = URL.createObjectURL(blob)
this.audio.preload = "auto"
this.audio.src = url
}).catch(err => {
console.log(err)
})
},
play() {
this.audio.play()
},
stop() {
this.audio.pause()
this.audio.currentTime = 0
}
},
mounted(){
this.getWav()
}
})
package main
import (
"io/ioutil"
"log"
"github.com/labstack/echo"
)
func main() {
e := echo.New()
e.Static("/", "./")
e.GET("/wav", func(c echo.Context) error {
b, err := ioutil.ReadFile("sample.wav")
if err != nil {
return echo.NewHTTPError(500, err.Error())
}
return c.Blob(200, "audio/wav", b)
})
log.Fatal(e.Start(":8989"))
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment