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トンネル接続を使用するための基本的な手順

推薦する

Linuxでmore、less、catコマンドを使用してファイルの内容を表示します

Linux では、cat、more、less の各コマンドを使用してファイルの内容を表示できます。c...

HTML テーブル タグ チュートリアル (31): セルの幅と高さの属性 WIDTH、HEIGHT

デフォルトでは、セルの幅と高さはコンテンツに応じて自動的に調整されますが、セルの幅と高さを手動で設定...

WMLタグの概要

構造関連タグ--------------------------------------------...

Linux でファイル権限を変更する chmod コマンドの詳細な分析

Linux chmodコマンドを使用して、ターゲット ファイルにアクセス、読み取り、書き込み、または...

nginx リクエスト ヘッダー データ読み取りプロセスの詳細な説明

前回の記事では、nginx がリクエスト ラインのデータを読み取って、リクエスト ラインを解析する方...

jsでシンプルなパズルゲームを実現する

この記事では、簡単なパズルゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な...

Linux LVM 論理ボリューム構成プロセス (作成、増加、削減、削除、アンインストール) の詳細な説明

Linux LVM論理ボリューム構成プロセスの詳細な説明多くの Linux ユーザーは、オペレーティ...

Linuxでディレクトリを効率的に切り替える方法

Linux でディレクトリを切り替えるとなると、誰もが間違いなくcdコマンドを思い浮かべるでしょう。...

Douyin ロゴを作成する手順の CSS3 分析

「Tik Tok」も大人気で、ユーザー数は7億人と言われています。今日は、注目を集めるためにTikT...

Vue ルーティング遅延読み込みの詳細

目次1. ルートの遅延読み込みとは何ですか? 2. ルートの遅延読み込みの使用1. ルートの遅延読み...

js の一般的でない演算子と演算子の概要

一般的な演算子と JavaScript の演算子の概要カテゴリオペレーター算術演算子+、–、*、/、...

MySQL は低速クエリを可能にします (EXPLAIN SQL ステートメントの使用の概要)

今日、データベース操作はますますアプリケーション全体のパフォーマンスのボトルネックになりつつあり、こ...

Mac M1 での Nginx のマルチサイト構成の実装

注: nginxはbrew経由でインストールされますウェブサイトのルートディレクトリ: /opt/h...

jsイベント委譲の詳細な説明

1. 各関数はオブジェクトであり、メモリを占有します。メモリ内のオブジェクトが増えるほど、パフォーマ...

HTML 名、ID、クラス (フォーマット/アプリケーション シナリオ/機能) などの違いの紹介。

ページには多くのコントロール (要素またはタグ) があります。これらのタグをより便利に操作するには、...