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

推薦する

Win10にnginxをインストールして設定するプロセス

1. はじめにNginx は、無料のオープンソースの高性能 HTTP サーバーおよびリバース プロキ...

CSSレイアウトで中央揃えレイアウトを実現する方法

1. 親コンテナーをテーブルに設定し、子をインライン要素に設定します。テキストを表示するサブコンテン...

MySQL 挿入時間の 8 時間の違いの問題の解決方法

MySQL挿入時の8時間の時差の問題を解決する通常、jdbc の URL にはいくつかのパラメータを...

背景画像に CSS3 変換を適用するためのソリューション

CSS 変換は便利ですが、背景画像にはまだ適用されていません。この投稿では、背景画像を回転させたい場...

CSS クロスブラウザ スタイルのバグのデバッグについて

まず最初に、適切なブラウザを選択します。私が Chrome を選択したのは、その強力なデバッグ ツー...

バックエンドの権限に基づいてナビゲーション メニューを動的に生成する Vue-router のサンプル コード

目次js の1. グローバルガードを登録する2. Vuex 状態管理グローバルキャッシュルート3. ...

MySQL InnoDB のロック機構の詳細な説明

前面に書かれたデータベースは本質的に共有リソースであるため、同時アクセスのパフォーマンスを最大化する...

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

MySQLは私がとても気に入っているデータベースです。今日はWindows 8システムでインストール...

MySQL 5.6 zipパッケージのインストールチュートリアルの詳細

これまでは、拡張子が .msi のファイル、つまり、完全なインストールが使用されていました。しかし、...

fullpage.js フルスクリーンスクロールの具体的な使い方

1.fullpage.js ダウンロードアドレスhttps://github.com/alvarot...

CSS3 のメディアクエリと rem レイアウトを組み合わせてモバイル画面に適応

CSS3 構文: (750 ピクセルのデザインの場合、1rem = 100 ピクセル) @media...

空のパスがページのパフォーマンスに与える影響に対する解決策

数日前、Google Reader で Yu Bo さんが共有した投稿「空のパスがページのパフォーマ...

組み込みオブジェクトに関するJavascriptの基礎

目次1. 組み込みオブジェクトの紹介1.1 数学オブジェクト1.2 数学における方法1.3 日付オブ...

MySQL が重複データを挿入するのを防ぐ 3 つの方法

新しいテーブルを作成する テーブル「人」を作成します( `id` int NOT NULL COMM...