Skip to content

Instantly share code, notes, and snippets.

@mahiya

mahiya/index.html

Created December 1, 2023 08:05
Show Gist options
  • Save mahiya/738b610d54a21abb08e93c98b985f1c0 to your computer and use it in GitHub Desktop.
Save mahiya/738b610d54a21abb08e93c98b985f1c0 to your computer and use it in GitHub Desktop.
Download ZIP
JavaScript で Azure AI Speech でリアルタイム文字起こしを行うコード
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1.0, user-scalable=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
* {
font-family: "Yu Gothic UI", "Meiryo UI", Meiryo, "MS Pgothic", Osaka, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
}
[v-cloak] {
display: none;
}
</style>
<title></title>
</head>
<body>
<div id="app" v-cloak>
<div>
<h2 class="h4" style="margin-top: 15px">Azure AI Speech の設定</h2>
<input type="text" class="form-control mb-2" placeholder="Speech Service の認証キー"
v-model="speechServiceKey" />
<input type="text" class="form-control mb-2" placeholder="Speech Service のリージョン"
v-model="speechServiceRegion" />
<input type="text" class="form-control" placeholder="認識する言語" v-model="speechRecognitionLanguage" />
</div>
<div class="mt-4">
<h2 class="h4" style="margin-top: 15px">音声の認識と要約</h2>
<button class="btn btn-primary" @click="startRecognition()">{{startRecognizeButtonLabel}}</button>
<button class="btn btn-secondary ms-3" @click="clearRecognized()">クリア</button>
</div>
<div class="mt-4">
<h2 class="h4">認識した音声</h2>
<div>
<div class="form-control" style="height: 300px; overflow-y: scroll; background-color: #e9ecef">
<span>{{recognized}}</span>
<span>{{recognizing}}</span>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://aka.ms/csspeech/jsbrowserpackageraw"></script>
<script>
new Vue({
el: '#app',
data: {
speechServiceKey: "",
speechServiceRegion: "japaneast",
speechRecognitionLanguage: "ja-JP",
recognizing: "",
recognized: "",
startedRecognition: false,
startRecognizeButtonLabel: "音声認識を開始",
recognizer: null,
},
mounted() { },
watch: {
startedRecognition: async function () {
this.startRecognizeButtonLabel = this.startedRecognition
? "音声認識を停止"
: "音声認識を開始";
},
},
methods: {
startRecognition: function () {
if (this.startedRecognition) {
this.recognizer.stopContinuousRecognitionAsync();
} else {
const speechConfig = SpeechSDK.SpeechConfig.fromSubscription(
this.speechServiceKey,
this.speechServiceRegion
);
speechConfig.speechRecognitionLanguage = this.speechRecognitionLanguage;
const audioConfig = SpeechSDK.AudioConfig.fromDefaultMicrophoneInput();
this.recognizer = new SpeechSDK.SpeechRecognizer(
speechConfig,
audioConfig
);
this.recognizer.recognizing = this.onRecognizing;
this.recognizer.recognized = this.onRecognized;
this.recognizer.startContinuousRecognitionAsync();
}
this.startedRecognition = !this.startedRecognition;
},
onRecognizing: async function (sender, e) {
if (e.result.privText) this.recognizing = e.result.privText;
},
onRecognized: function (sender, e) {
if (e.privResult.privText) this.recognized += e.privResult.privText;
this.recognizing = "";
},
clearRecognized: async function () {
this.recognizing = "";
this.recognized = "";
},
generateGUID() {
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
const r = (Math.random() * 16) | 0,
v = c == "x" ? r : (r & 0x3) | 0x8;
return v.toString(16);
});
},
},
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment