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

uniapp怎麼使用audio標籤

Apr 27, 2023 am 09:08 AM

隨著行動互聯網的發展,音訊相關應用程式也越來越受到使用者的歡迎,例如音樂播放器、語音聊天、語音辨識等等。而使用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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)