WeChatアプレットのオーディオコンポーネントがiOSで再生できない問題の解決策

WeChatアプレットのオーディオコンポーネントがiOSで再生できない問題の解決策

解決策:クリック イベントをオーディオ コンポーネントにバインドし、再生メソッドと一時停止メソッドを手動でトリガーします。

コードスニペット:

wxml ファイル

<!-- 音声通話であり、通話記録があり、通話の説明に「不在着信」が含まれていません -->
<view class="reference"
    wx:if="{{itemList.activity_type === 'phone' && itemList.activity_reference_id && tool.indexOf(itemList.comment,'missed') === -1 }}">
    <!-- 音声再生-->
    <van-button class="ref-btn" wx:if="{{audioResourceMaps[itemList.activity_reference_id] === undefined}}"
      loading="{{itemList.activity_reference_id === currentGettingReferenceId}}" icon="play" type="info" プレーン
      データ参照ID="{{itemList.activity_reference_id}}" bindtap="getReference">
    </バンボタン>
    <view wx:else class="audio-box">
        <!-- 音声再生一時停止 -->   
      <van-button class="ref-btn" wx:if="{{audioResourceMaps[itemList.activity_reference_id]}}"
      データ参照ID="{{itemList.activity_reference_id}}"
        icon="一時停止" type="情報" プレーン bindtap="一時停止オーディオ"/>
        <!-- 通話録音なしをクリック--> 
      <span wx:else class="no-audio-text">通話録音が見つかりません</span>
    </ビュー>
</ビュー>

wxss ファイル

。参照 {
  上マージン: 20rpx;
  高さ: 100%;
  パディング: 5rpx;
  ボックスのサイズ: 境界線ボックス;
}

.ref-btn {
  幅: 80rpx;
  高さ: 80rpx;
  ディスプレイ: フレックス;
}

.ref-btn ボタン {
  幅: 80rpx;
  高さ: 80rpx;
  境界線の半径: 50%;
}

jsファイル

/**
   * コンポーネントの初期データ */
  データ: {
    currentGettingReferenceId: null, //現在再生中のオーディオID
    audioResourceMaps: {}, //クリックされたオーディオのリスト isPause:false, //一時停止するかどうか},
/**
   * コンポーネントのライフサイクル */
  生涯:
    添付: 関数 () {
      // サブコンポーネントなので、ここでインスタンスを取得する必要があります。this.audioContext = wx.createInnerAudioContext();
    },
    分離: 関数 () {
      // 再生を停止します this.stopAudio()
      // コンポーネントインスタンスがページノードツリーから削除されたときに実行されます},
  },
  メソッド: { 
    // 録音を取得する getReference(e) {
      id = e.target.dataset.referenceId とします
      if(id != this.data.currentGettingReferenceId){
        this.stopAudio()
      }
      this.setData({
        現在の参照IDを取得中:id
      })
      // インターフェイスをクリックして録画 URL を取得します。 インターフェースリクエストは、独自のカプセル化WXAPI.getResourceUrl(に従って記述されます。
        `/会話/会話セッション/${id}/`、{
          データ型: 'すべて',
        }).then(({resource_url}) => {
          console.log('オーディオアドレス ====',resource_url,)
        url = resource_url && resource_url.indexOf('https://') > -1? encodeURI(resource_url) : null とします。
        this.data.audioResourceMaps[id] = url;
        if(resource_url) this.playAudio(id,url)
        this.setData({
          オーディオリソースマップ: this.data.audioResourceMaps
        })
        console.log('再生リスト =====',this.data.audioResourceMaps)
      }).catch(関数(e) {
        コンソール.log(e)
      })
    },
    // 一時停止 pauseAudio(){
      this.setData({
        isPause: !this.data.isPause
      })
      id = this.data.currentGettingReferenceId とします
      console.log(id,'再生一時停止ID')
      定数 innerAudioContext = this.audioContext
      if(this.data.isPause){
        インナーオーディオコンテキスト.一時停止()
        console.log('再生を一時停止')
      }それ以外{
        インナーオーディオコンテキスト.再生()
        console.log('プレイを続ける')
      }
    },
    // 再生を停止する stopAudio(){
      定数 innerAudioContext = this.audioContext
      インナーオーディオコンテキスト.stop()
      obj = this.data.audioResourceMaps とします。
      for(let アイテムをobjに入れる){
        オブジェクト[項目]を削除する
      }
      // 再生を停止するには、プレイリストIDに対応するオーディオアドレスをクリアします。this.setData({
        オーディオリソースマップ: obj,
        現在の参照ID:null
      })
      console.log('再生を停止')
    },
    // 再生 playAudio(id,url) {
      定数 innerAudioContext = this.audioContext
      console.log(url, 'オーディオアドレス')
      if(url){
        innerAudioContext.src = URL
        インナーオーディオコンテキスト.再生()
        innerAudioContext.onPlay(() => {
          console.log('プレイを開始')
        })
        innerAudioContext.onTimeUpdate(() => {
          console.log(innerAudioContext.duration,'合計継続時間')   
          console.log(innerAudioContext.currentTime,'現在の再生進行状況')
        })
        タイムアウトを設定する(() => {
          console.log(innerAudioContext.duration,'合計継続時間')   
          console.log(innerAudioContext.currentTime,'現在の再生進行状況')
        }, 500)
        innerAudioContext.onEnded(() => {
          obj = this.data.audioResourceMaps とします。
          for(let アイテムをobjに入れる){
            オブジェクト[項目]を削除する
          }
          this.setData({
            オーディオリソースマップ: obj,
            現在の参照ID:null
          })
          console.log('再生が完了しました')
        })
        innerAudioContext.onError((res) => {
          コンソールログ(res.errMsg)
          コンソールログ(res.errCode)
        })
      }
    }

レンダリング

⚠️WeChatアプレットでvantを使用するには、.jsonファイルで参照する必要があります。そうしないと、タグが表示されません。

app.jsonファイルで引用し、グローバルに利用可能になりました

"コンポーネントの使用": {
    "van-button": "@vant/weapp/button/index",
    "van-icon": "@vant/weapp/icon/index",
  }

公式ウェブサイトのドキュメント: developer.weixin.qq.com/miniprogram…

要約する

WeChatミニプログラムのオーディオコンポーネントがiOS側で再生できない問題を解決する方法についての記事はこれで終わりです。iOS側でのミニプログラムのオーディオコンポーネントの再生に関するより関連性の高いコンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。皆様が今後も123WORDPRESS.COMを応援してくれることを願っています。

以下もご興味があるかもしれません:
  • WeChatアプレットオーディオコンポーネントの例の詳細な説明
  • WeChat アプレットはオーディオ コンポーネントを使用して音楽を再生する機能の例 [ソース コードのダウンロードあり]

<<:  SQL Server の完全バックアップに関する珍しいエラーと解決策

>>:  Mysql SSHトンネル接続を使用するための基本的な手順

推薦する

入力と画像を揃えるためにvertical-alignを使用します

input と img を同じ行に配置すると、img タグが常に input より 1 つ上になり、...

JSはカリキュラムタイムテーブルアプレット(スーパーカリキュラムタイムテーブルを模倣)を実装し、カスタムバックグラウンド機能を追加します

概要:市販されているいくつかのタイムテーブルソフトウェアから教訓を得ました。機能が複雑すぎるため、タ...

LinuxにNginxをインストールする詳細な手順

1. Nginxのインストール手順1.1 公式サイトの紹介http://nginx.org/en/d...

Docker で MySQL マスター スレーブ レプリケーションを実装するためのサンプル コード

目次1. 概要1. 原則2. 実装3. スレーブインスタンスを作成する4. マスタースレーブ構成要約...

LNMP と phpMyAdmin を Docker にデプロイする方法

環境準備:複数のコンテナに基づいてホストに lnmp をデプロイします。 nginx サービス: 1...

32 典型的な列/グリッドベースのウェブサイト

列ベースの Web デザインのインスピレーションをお探しの場合は、32 個のクラシックな列/グリッド...

MySQL マルチバージョン同時実行制御 MVCC の実装

トランザクション分離レベルの設定 グローバルトランザクション分離レベルを読み取りコミット済みに設定;...

Vue 初心者ガイド: 最初の Vue-cli スキャフォールディング プログラムの作成

1. Vue - 最初の vue-cli プログラムVueの開発はNodeJSに基づいています。実際...

MySQL システム ユーザーが開くことができるファイルの最大数に関する簡単な説明

本から学ぶことは常に浅はかで、これがさらなるダウンタイムを引き起こすことには決して気づきません......

Web フロントエンドのパフォーマンス最適化の詳細説明: リソースのマージと圧縮

2つの目的のためのリソースの結合と圧縮httpリクエストの数を減らす要求されたリソースのサイズを縮小...

CentOS に Nginx をインストールする方法

公式ドキュメント: https://nginx.org/en/linux_packages.html...

UniappはBaidu Voiceを使用して録音をテキストに変換する機能を実現

3日間さまざまな困難に遭遇した後、ようやくこの機能を実現しました。正常に実装できる方法を見つける前に...

JSはアニメーションのレイアウト変換を実装します

JS でアニメーションを記述する場合、移動前に相対位置を絶対位置に変換してからアニメーション機能を実...

Google ブラウザのラベルと入力間のスペースに関する小さな問題

最初にコード、次にテキストコードをコピーコードは次のとおりです。 <!DOCTYPE html...

Nginx+SpringBoot による負荷分散の実装例

負荷分散の概要Nginx の負荷分散実装を紹介する前に、負荷分散の分類について簡単に説明します。負荷...