特定のワードを含んだツイートをリアルタイムで取得して表示するwebアプリを作っているときに、取得されたら通知音を鳴らしたくなったので、その実装方法を書いていきます。
環境
- vue@2.6.12
- @vue/cli 4.5.9
実装方法
今回はjavascriptのAudioオブジェクトを使って実装します
まずは、鳴らしたい音声ファイル(今回はsound.mp3とします)をsrc/assets に置きます。
あとは以下のコードを書けばツイート取得時に音がなります
<div><button>ツイート取得</button></div>
<script>
import Twitter from "twitter";
import audio from "../assets/sound.mp3";
export default {
data: function () {
return {};
},
methods: {
getTweets(searchKeyword) {
let client = new Twitter({
consumer_key: process.env.VUE_APP_CONSUMER_KEY,
consumer_secret: process.env.VUE_APP_CONSUMER_SECRET,
access_token_key: process.env.VUE_APP_ACCESS_TOKEN_KEY,
access_token_secret: process.env.VUE_APP_ACCESS_TOKEN_SECRET,
});
let alert = new Audio(audio);
//ツイート取得
client.stream(
"statuses/filter",
{ track: searchKeyword },
function (stream) {
stream.on("data", function (tweet) {
console.log(tweet);
alert.play();
});
}
);
},
},
};
</script>VUE_APP_CONSUMER_KEY="ご自身の consumer_key"
VUE_APP_CONSUMER_SECRET="ご自身の consumer_secret"
VUE_APP_ACCESS_TOKEN_KEY="ご自身の access_token_key"
VUE_APP_ACCESS_TOKEN_SECRET="ご自身の access_token_secret"