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

推薦する

ローカル Docker に Postgres 12 + pgadmin をインストールする方法 (Apple M1 をサポート)

目次導入Intel CPUをサポートApple M1のサポートテスト導入このプロジェクトでは最近、P...

検索エンジンのウェブサイトの入り口の無料コレクション

1: Baiduウェブサイトログイン入口ウェブサイト: http://www.baidu.com/s...

Vue は動的な円形のパーセンテージ進捗バーを実装します

最近、小さなプログラムを開発しているときに、次の設計図のような円形のパーセンテージ進捗状況バーを実装...

MySQL 8.0.11 MacOS 10.13 のインストールと設定方法のグラフィックチュートリアル

MacにMySQLデータベースをインストールし、環境変数を設定する手順を参考までに記録します。具体的...

知らないかもしれない奇妙で興味深いDockerコマンド

はじめに使えるかもしれないが、あまり使われていない、シンプルで実用的なDockerコマンドをいくつか...

MySQLクエリが遅い場合の理由と解決策

Python プログラムを書き、Mysql ライブラリを集中的に操作したためです。データ量が多くない...

MySQLでよく使われる4つのストレージエンジンについて簡単に説明します。

よく使われる4つのMySQLエンジンの紹介(1):MyISAMストレージエンジン:トランザクションや...

数十行のjsを使用してクールなキャンバスインタラクティブ効果を実現する方法を教えます

目次1. 円を描く2. マウスで動かした円3. マウスでドラッグした粒子4. カラーグラデーション粒...

複数クリックを防ぐVueの実践

通常、クリック イベントは、メッセージ リマインダーのさまざまな状況に分割されます。これらが処理され...

Windows 10 での MySQL 8.0.22 のインストールと設定方法のグラフィック チュートリアル

MySQL 8.0.22のインストールと設定方法のグラフィックチュートリアル、参考までに、具体的な内...

jQueryは動的タグイベントを実装します

この記事では、タグイベントを動的に追加するためのjQueryの具体的なコードを参考までに紹介します。...

TypeScript の Enum が問題となる理由

目次どうしたの?いつ使うか列挙の数を制御するビット値コントロールインデックス非数値列挙結論はType...

MySQLの論理アーキテクチャに関する深い理解

MySQL は現在、ほとんどの企業や事業体で使用されているデータベースです。MySQL が使用される...

Vue での Vue.prototype の使用に関する詳細な説明

目次1. 基本的な例2. インスタンスプロトタイプのスコープを設定する3. グローバル変数の登録と使...

MySQLトランザクションの特徴と分離レベルについてお話ししましょう

インターネットにはすでにこの種の記事が溢れていますが、私がこれをまだ書いている理由は単純です。それは...