解決策:クリック イベントをオーディオ コンポーネントにバインドし、再生メソッドと一時停止メソッドを手動でトリガーします。 コードスニペット: 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トンネル接続を使用するための基本的な手順
この記事では、主に、円形のダイナミックな光る特殊効果アニメーションを実現するための純粋な CSS3 ...
まず、VMware Workstation 15.1 バージョンをダウンロードします。Thunder...
開発プロセス中に、MySQL データベースを復元した後にデータベース データに文字化けが発生した場合...
nginx をコンパイルしてインストールし、一定期間使用した後、現在のバージョンに脆弱性があることや...
目次1. テストデータ2. ヌル値による不便3. スペース、空の値、null をどのように判断すれば...
Web ページを作成するときに、特定のフォントを使用したい場合は、 @font-faceを介して参照...
目次序文ディープページングを制限すると遅くなるのはなぜですか?サブクエリによる最適化B+ツリー構造の...
MySQL sql_modeの適切な設定sql_mode は見落とされやすい変数です。デフォルト値は...
VMに慣れた後、BOXに切り替えるのは少し異なります。たとえば、コピーネットワークカードを2枚使って...
目次スケルトンスクリーンとはアプレットでスケルトン画面を生成する方法導入方法表示と非表示ユーザーエク...
JBoss は Tomcat を Web コンテナとして使用するため、JBoss の Web コンテ...
HTML の img タグで画像の中心を表示する方法は、現在 3 つあります。ここで記録しておきま...
目次チュートリアルシリーズ1. ユーザー管理1. ユーザーアカウント2. アカウントの追加と削除3....
目次1. はじめにII. 監視対象2.1 なぜオブジェクトを監視する必要があるのですか? 2.2 デ...
目次1. 実験環境2. Dockerソースをインストールする3. Dockerをインストールする4....