解決策:クリック イベントをオーディオ コンポーネントにバインドし、再生メソッドと一時停止メソッドを手動でトリガーします。 コードスニペット: 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を応援してくれることを願っています。 以下もご興味があるかもしれません:
|
<<: SQL Server の完全バックアップに関する珍しいエラーと解決策
>>: Mysql SSHトンネル接続を使用するための基本的な手順
1. Python 3をダウンロードする https://www.python.org/ftp/py...
/******************** * キャラクターデバイスドライバー**********...
1つ。 wget https://dev.mysql.com/get/mysql57-communi...
jQueryは劇場の座席選択と予約の効果を実現します。参考までに、具体的な内容は次のとおりです。効果...
1. catalina.bat は UTF-8 に設定する必要があります。UTF-8 に設定しないと...
最近、Djangoを学習しているときにデータベースを使用する必要があったため、MySQLで使用するた...
この記事では、参考までにMySQL 8.0.19 winx64のインストールチュートリアルを紹介しま...
例示するMySql Community Edition は、5.7.11 以降、テーブルベースのデー...
序文あるプロジェクトの実行可能ファイルをインストールすると、MySQL 自体をインストールできるよう...
アナコンダのインストールAnaconda は、Python の使用を容易にするために作成されたソフト...
[問題の説明]アプリケーション側では、次のエラーが時々表示されます。メソッド 'mysql_...
最近私の記事を読んだ人なら誰でも、私が現在WeChatミニプログラムプロジェクトを担当しており、その...
別のライブラリから別のライブラリにデータをインポートする必要がある場合があり、このデータは CSV ...
この記事では、WeChatアプレットで写真を撮ったり、アルバムから写真を選択したりするための具体的な...
目次1. システム環境2. 運用プロセスと途中で遭遇した問題1. システム環境1. Tencent ...