始める前に、uniapp 開発で使用される 2 つのコンポーネント (オーディオ オーディオ コンポーネントとスライダー スライディング セレクター コンポーネント) を理解する必要があります。次に、次の手順を参照して、オーディオ プログレス バーのデザインを実装します。
- 音声コンポーネントをページに追加します
ページのテンプレートの audio タグを使用して音声コンポーネントを追加し、src を音声のパスに設定します。ファイル。
- プログレス バー スライダー コンポーネントを追加します。
スライダー コンポーネントを追加し、バインドされた v-model 値を現在の再生時間に設定して、プログレス バーの位置を制御します。
- オーディオ進行状況バーのスタイルを設定する
CSS スタイルを使用して、進行状況バーの色、進行状況バーのスライダー スタイル、進行状況バーの最大値と最小値などのスライダー スタイルを設定します。 。
- オーディオ プログレス バーの更新を実現する
uniapp の setInterval 関数を使用してプログレス バーの位置を更新し、現在のプログレス バーを計算します。現在の再生時間と合計再生時間 場所。
- プログレス バーのドラッグ機能を実装する
ユーザーがプログレス バーをドラッグすると、スライダーの @change イベントを使用して現在のドラッグ値を取得できます。を使用して、オーディオ コンポーネントのシーク メソッドを使用すると、対応する再生位置にジャンプします。
最終的なコードは次のとおりです:
<template> <view> <audio :src="audioSrc" @timeupdate="updateTime"></audio> <slider v-model="currentTime" :max="duration" @change="changeTime"></slider> </view> </template> <script> export default { data() { return { audioSrc: 'your-audio-src', duration: 0, currentTime: 0, timeUpdate: null } }, mounted() { this.initAudio() }, methods: { initAudio() { let audio = uni.createInnerAudioContext() audio.src = this.audioSrc audio.onTimeUpdate(() => { this.duration = audio.duration this.currentTime = audio.currentTime }) audio.play() this.timeUpdate = setInterval(() => { this.currentTime = audio.currentTime }, 500) }, updateTime(e) { this.currentTime = e.detail.currentTime this.duration = e.detail.duration }, changeTime(e) { let audio = uni.createInnerAudioContext() audio.src = this.audioSrc audio.seek(e.detail.value) } } } </script> <style scoped> .uni-slider-wrapper { height: 8px; border-radius: 4px; background-color: #ccc; } .uni-slider-track { height: 8px; border-radius: 4px; background-color: #1cbbb4; } .uni-slider-thumb { border-radius: 12px; background-color: #1cbbb4; } </style>
このようにして、uniapp にオーディオ進行状況バーのデザインを実装し、ユーザーがオーディオ再生の進行状況をより簡単に制御できるようにします。
以上がuniappでオーディオプログレスバーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

この記事では、モバイルプラットフォームとWebプラットフォームのデバッグ戦略について説明し、Android Studio、Xcode、Chrome Devtoolsなどのツールを強調し、OSとパフォーマンスの最適化全体で一貫した結果を得るためのテクニックについて説明します。

この記事では、Hbuilderx、Wechat開発者ツール、Chrome Devtoolsなどのツールに焦点を当てたUniapp開発のためのデバッグツールとベストプラクティスについて説明します。

この記事では、複数のプラットフォームにわたるUNIAPPアプリケーションのエンドツーエンドテストについて説明します。テストシナリオの定義、Appiumやサイプレスなどのツールの選択、環境のセットアップ、テストの書き込みと実行、結果の分析、インテグラートをカバーします

この記事では、ユニット、統合、機能、UI/UX、パフォーマンス、クロスプラットフォーム、セキュリティテストなど、UNIAPPアプリケーションのさまざまなテストタイプについて説明します。また、クロスプラットフォームの互換性を確保し、JESのようなツールを推奨しています

この記事では、過剰なグローバルデータの使用や非効率的なデータバインディングなど、UNIAPP開発における一般的なパフォーマンスアンチパターンについて説明し、これらの問題を特定して緩和してアプリのパフォーマンスを向上させる戦略を提供します。

この記事では、プロファイリングツールを使用して、Uniappのパフォーマンスボトルネックを識別および解決し、セットアップ、データ分析、最適化に焦点を当てています。

この記事では、Uniappでネットワーク要求を最適化するための戦略について説明し、遅延の削減、キャッシュの実装、および監視ツールを使用してアプリケーションのパフォーマンスを向上させることに焦点を当てています。

この記事では、圧縮、レスポンシブデザイン、怠zyなロード、キャッシング、およびWebP形式の使用を通じて、Webパフォーマンスを向上させるために、Uniappの画像の最適化について説明します。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

WebStorm Mac版
便利なJavaScript開発ツール

Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
