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

推薦する

CentOS6.5にpython3.7をインストールする詳細な手順

1. Python 3をダウンロードする https://www.python.org/ftp/py...

Linux カーネル デバイス ドライバー キャラクタ デバイス ドライバー ノート

/******************** * キャラクターデバイスドライバー**********...

jQueryで劇場の座席選択と予約の効果を実現

jQueryは劇場の座席選択と予約の効果を実現します。参考までに、具体的な内容は次のとおりです。効果...

Tomcatでcatalina.batがUTF-8に設定されている場合、コンソールに文字化けした文字が表示されます

1. catalina.bat は UTF-8 に設定する必要があります。UTF-8 に設定しないと...

Navicat を MySQL に接続するときに発生する 2059 エラーの解決方法

最近、Djangoを学習しているときにデータベースを使用する必要があったため、MySQLで使用するた...

MySQL 8.0.19 winx64 インストールチュートリアルと Windows 10 での初期パスワードの変更

この記事では、参考までにMySQL 8.0.19 winx64のインストールチュートリアルを紹介しま...

MySQL テーブル全体の暗号化ソリューション keyring_file の詳細な説明

例示するMySql Community Edition は、5.7.11 以降、テーブルベースのデー...

MySQL サービスを完全に削除する方法 (レジストリをクリーンアップする)

序文あるプロジェクトの実行可能ファイルをインストールすると、MySQL 自体をインストールできるよう...

Windows での PyTorch 開発環境のインストール チュートリアル

アナコンダのインストールAnaconda は、Python の使用を容易にするために作成されたソフト...

MySQL 接続で認証失敗エラーが発生する場合の分析と解決方法

[問題の説明]アプリケーション側では、次のエラーが時々表示されます。メソッド 'mysql_...

CSS 疑似クラス: 空っぽだと光る (サンプルコード)

最近私の記事を読んだ人なら誰でも、私が現在WeChatミニプログラムプロジェクトを担当しており、その...

MySql インポート CSV ファイルまたはタブ区切りファイル

別のライブラリから別のライブラリにデータをインポートする必要がある場合があり、このデータは CSV ...

WeChatアプレットは写真の撮影とアルバムからの写真の選択を実現します

この記事では、WeChatアプレットで写真を撮ったり、アルバムから写真を選択したりするための具体的な...

Linux システム Docker への ASP.NET Core アプリケーションのデプロイのプロセス分析

目次1. システム環境2. 運用プロセスと途中で遭遇した問題1. システム環境1. Tencent ...