uniapp アプリケーションが字幕翻訳と翻訳サービスを実装する方法

uniapp アプリケーションが字幕翻訳と翻訳サービスを実装する方法と、具体的なコード例を示します

グローバリゼーションの発展に伴い、ますます多くの人々が言語を越えた障壁を感じ始めています。言語を越えたコミュニケーション。ユーザーの言語コミュニケーションを容易にするために、多くのアプリケーションは翻訳機能を提供しています。 uniappアプリケーションに字幕翻訳や翻訳サービスを実装することは難しくありませんが、次に具体的なコード例を示します。

まず、翻訳インターフェイスを導入する必要があります。ここでは、Baidu 翻訳インターフェイスを例として取り上げます。次のコードを uniapp プロジェクトの main.js に追加します。

// main.js
import Vue from 'vue';
import App from './App';

Vue.config.productionTip = false;

// 引入百度翻译插件
import BaiduTranslate from 'baidu-translate';
Vue.prototype.$translate = new BaiduTranslate({
  appid: 'your_appid',
  secret: 'your_secret'
});

App.mpType = 'app';

const app = new Vue({
  ...App
});
app.$mount();

上記のコードでは、BaiduTranslate という名前のプラグインを使用して翻訳サービスを実装します。 。 your_appid と your_secret は、Baidu Translation Open Platform で申請したアプリケーション ID とアプリケーション キーに置き換える必要があることに注意してください。

字幕翻訳を実装するためのコア ロジックは、uniapp ページのコンポーネントにあります。 SubtitleTranslate という名前のコンポーネントを作成し、その中に字幕翻訳機能を実装できます。具体的なコードは次のとおりです。

<!-- SubtitleTranslate.vue -->
<template>
  <view>
    <video :src="videoUrl" @timeupdate="handleVideoTimeUpdate"></video>
    <view v-for="subtitle in subtitles" :key="subtitle.index">
      <text>{{ subtitle.text }}</text>
      <text>{{ subtitle.translatedText }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: 'your_video_url', // 替换为你的视频地址
      subtitles: [
        {
          index: 1,
          text: 'Hello',
          translatedText: ''
        },
        {
          index: 2,
          text: 'Uniapp',
          translatedText: ''
        }
      ]
    };
  },
  methods: {
    handleVideoTimeUpdate(e) {
      const currentTime = e.target.currentTime;
      // 根据当前时间找到对应的字幕
      const subtitle = this.subtitles.find(sub => currentTime >= sub.start && currentTime <= sub.end);
      if (subtitle && !subtitle.translatedText) {
        // 调用翻译接口
        this.$translate.translate(subtitle.text, { from: 'en', to: 'zh' }).then(result => {
          subtitle.translatedText = result.trans_result.dst;
        });
      }
    }
  }
};
</script>

上記のコードでは、最初にビデオ コンポーネントを定義し、配列 subtitles を使用して字幕と翻訳されたテキストを保存します。ビデオの timeupdate イベントでは、現在時刻に基づいて対応する字幕を見つけ、未翻訳の字幕を翻訳するために翻訳インターフェイスを呼び出します。翻訳結果は transratedText 属性に保存されます。

ビデオ アドレスは実際のビデオ アドレスに置き換える必要があり、変換インターフェイスのパラメータも実際の状況に応じて調整する必要があることに注意してください。

上記は、uniapp アプリケーションが字幕翻訳と翻訳サービスを実装する方法を示す具体的なコード例です。翻訳インターフェイスを呼び出してビデオ時間を監視することで、字幕のリアルタイム翻訳を実現できます。上記の内容がお役に立てば幸いです。

以上がuniapp アプリケーションが字幕翻訳と翻訳サービスを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。