解決策:クリック イベントをオーディオ コンポーネントにバインドし、再生メソッドと一時停止メソッドを手動でトリガーします。 コードスニペット: 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トンネル接続を使用するための基本的な手順
input と img を同じ行に配置すると、img タグが常に input より 1 つ上になり、...
概要:市販されているいくつかのタイムテーブルソフトウェアから教訓を得ました。機能が複雑すぎるため、タ...
1. Nginxのインストール手順1.1 公式サイトの紹介http://nginx.org/en/d...
目次1. 概要1. 原則2. 実装3. スレーブインスタンスを作成する4. マスタースレーブ構成要約...
環境準備:複数のコンテナに基づいてホストに lnmp をデプロイします。 nginx サービス: 1...
列ベースの Web デザインのインスピレーションをお探しの場合は、32 個のクラシックな列/グリッド...
トランザクション分離レベルの設定 グローバルトランザクション分離レベルを読み取りコミット済みに設定;...
1. Vue - 最初の vue-cli プログラムVueの開発はNodeJSに基づいています。実際...
本から学ぶことは常に浅はかで、これがさらなるダウンタイムを引き起こすことには決して気づきません......
2つの目的のためのリソースの結合と圧縮httpリクエストの数を減らす要求されたリソースのサイズを縮小...
公式ドキュメント: https://nginx.org/en/linux_packages.html...
3日間さまざまな困難に遭遇した後、ようやくこの機能を実現しました。正常に実装できる方法を見つける前に...
JS でアニメーションを記述する場合、移動前に相対位置を絶対位置に変換してからアニメーション機能を実...
最初にコード、次にテキストコードをコピーコードは次のとおりです。 <!DOCTYPE html...
負荷分散の概要Nginx の負荷分散実装を紹介する前に、負荷分散の分類について簡単に説明します。負荷...