オーディオオブジェクト
序文：
場合によっては、ページにオーディオ コントロールを配置してクリックして手動で再生したくない場合がありますが、アイコン クリック イベントまたは js を使用して、その再生と一時停止の操作を制御します。このとき、 Audio オブジェクトを使用する必要があります , * *ここのブロガーは Vue プロジェクトなので、データで使用されているのと同じ Audio インスタンス
プロジェクト要件: 入力ボックスの入力が完了しました
1.プロジェクトに必要なプロンプト音声を提供します
2. データ内でオーディオ オブジェクトを定義し、必要なオーディオをインポートします
export default {
data(){
return {
// 实例化一个音频播放器对象
audio: new Audio()
successUrl: require("../../../assets/music/success.mp3"),
errorUrl: require("../../../assets/music/error.wav"),
}
}
}
3. 入力ボックスでインターフェースを呼び出すメソッドで、インターフェースの戻りステータスに応じて異なるサウンドを呼び出します。
getInput() {
this.queryParams = {
code: this.barcode,
name: this.pageOrderName,
};
operatePos(this.queryParams).then((res) => {
this.name = "";
this.barcode = "";
if (res.code == 0) {
// 开启自动播放
this.audio.autoplay = true;
this.audio.src = this.successUrl;
this.sonList = res.data;
this.getList(this.sonList);
this.poData = this.sonList.lastScanBoxCode.slice(
this.sonList.lastScanBoxCode.length - 1
);
this.resSize = this.sonList.platsize;
this.$infoMsg.showInfoMsg(res.msg, this);
} else {
// 开启自动播放
this.audio.autoplay = true;
this.audio.src = this.errorUrl;
this.$infoMsg.showErrorMsg(res.msg, this);
}
});
},
基本的なヒント:
将来的には、src を切り替えるだけで再生できるようになり、さまざまなニーズに応じて、ページがロードされたときに自動的に再生するように設定したり、各オーディオが再生された後に何をするかを設定したり、コールバック操作を実行したりすることができます。エンドイベントを通じて実行されます。
created(){
// 开启自动播放
this.audio.autoplay = true;
// 绑定播放完毕事件,每次放完了可以做一些收尾的事
this.audio.addEventListener('ended', () => {
// dosomething...
});
}
再生の src モードを設定します。
this.audio.src = url
再生を一時停止する方法:
await this.audio.play() // 播放
this.audio.pause() // 暂停
// 因为加载音频文件是需要时间的,所以play方法返回的上一个promise,我们要等待他加载完成才能播放
これらの基本を理解したら、サウンドの再生を自分で制御できるようになります~