首頁 > web前端 > uni-app > uniapp怎麼使用audio標籤

uniapp怎麼使用audio標籤

PHPz
發布: 2023-04-27 10:45:41
原創
2844 人瀏覽過

隨著行動互聯網的發展,音訊相關應用程式也越來越受到使用者的歡迎,例如音樂播放器、語音聊天、語音辨識等等。而使用uniapp開發這些音訊應用是非常方便的,其中有一個重要的組件就是

  1. 基本上使用方法

在uniapp中,可以直接在頁面的wxml檔案中使用

<audio src="../../static/audio.mp3" id="myAudio"></audio>
登入後複製

其中,src屬性指定音訊檔案的路徑,id屬性用來給該

  1. 播放音頻

要播放一個音頻,需要先取得該

const myAudio = uni.createInnerAudioContext();
myAudio.src = "../../static/audio.mp3";
myAudio.play();
登入後複製

其中,createInnerAudioContext()方法用來建立

  1. 暫停音頻

為了暫停一個正在播放的音頻,可以使用pause()方法,範例程式碼如下:

myAudio.pause();
登入後複製
  1. 停止音頻

停止一個正在播放的音頻,可以使用stop()方法,範例程式碼如下:

myAudio.stop();
登入後複製

需要注意的是,停止音頻之後需要調用destroy( )方法銷毀目前

myAudio.destroy();
登入後複製
  1. 監聽事件

  • onPlay():當音訊開始播放時觸發。
  • onPause():當音訊暫停時觸發。
  • onStop():當音訊停止時觸發。
  • onEnded():當音訊播放結束時觸發。
  • onError():當音訊播放出錯時觸發。

範例程式碼如下:

myAudio.onPlay(() => {
  console.log('音频开始播放');
});

myAudio.onPause(() => {
  console.log('音频暂停');
});

myAudio.onStop(() => {
  console.log('音频停止');
});

myAudio.onEnded(() => {
  console.log('音频播放结束');
});

myAudio.onError((res) => {
  console.error('音频播放出错', res.errMsg);
});
登入後複製

以上就是uniapp中使用

總結

本文介紹了uniapp中使用

以上是uniapp怎麼使用audio標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板