Comment ajouter des sous-titres et de la voix dans Vue

Dans la conception Web actuelle, de plus en plus de personnes choisissent d'utiliser Vue pour le développement car elle présente les avantages d'être rapide, flexible et réutilisable. De plus, Vue dispose également de ressources riches et d'un support communautaire, ce qui rend ce framework privilégié par de plus en plus de développeurs.

Dans le développement réel, certains sites Web très demandés doivent souvent offrir une expérience utilisateur d'interaction textuelle et vocale, et la manière d'implémenter cette fonction dans Vue est devenue un domaine que de nombreux développeurs souhaitent étudier. Ci-dessous, nous discuterons en détail des deux aspects des sous-titres et de la voix dans Vue.

1. Comment ajouter des sous-titres à Vue

1. Préparation des ressources de sous-titres

Lorsque vous utilisez Vue pour créer des sous-titres, nous devons d'abord préparer les ressources de sous-titres requises. Vous pouvez télécharger les fichiers de sous-titres correspondants via des sites Web liés aux sous-titres. selon Ces fichiers de sous-titres doivent être traités.

2. Installer les plug-ins Vue

Vue fournit des plug-ins pratiques Lorsque nous devons ajouter des sous-titres, nous devons installer les plug-ins correspondants. Par exemple, nous pouvons utiliser le plug-in Vue-Sub pour ajouter des sous-titres. La méthode d'installation est la suivante :

npm install vue-sub --save

3. Utilisez le plug-in Vue-Sub

Après avoir installé le plug-in Vue-Sub, nous pouvons utiliser ce plug-in dans les composants qui doivent ajouter des sous-titres. Voici la méthode d'implémentation spécifique :

Tout d'abord, dans les composants qui doivent ajouter des sous-titres, nous devons introduire le composant Vue-Sub et enregistrer le composant introduit auprès de Vue.

// 引入组件
import VueSub from 'vue-sub'

// 注册到Vue中
Vue.use(VueSub)

Ensuite, dans le composant qui doit ajouter des sous-titres, nous pouvons utiliser l'instruction "v-sub" fournie par le composant Vue-Sub pour restituer le contenu des sous-titres en HTML.

<video src="xxx" v-sub="{ en: &#39;./subtitle.en.srt&#39;, cn: &#39;./subtitle.cn.srt&#39; }"></video>

Ici, nous avons lié la commande "v-sub" et entré les deux paramètres "en" et "cn", qui correspondent respectivement aux sous-titres anglais et aux sous-titres chinois.

À ce stade, nous avons terminé l'opération d'ajout de sous-titres dans Vue, et l'effet est très bon ! Si vous devez également ajouter des sous-titres dans Vue, vous pouvez aussi bien essayer cette méthode.

2. Comment ajouter de la voix à Vue

Dans la conception Web actuelle, la voix est également devenue une direction de recherche importante. Dans l'utilisation de Vue, la manière d'obtenir des effets vocaux est également une question dont les développeurs discutent activement. Ci-dessous, nous aborderons deux aspects de l'ajout de voix à Vue pour vous aider à ajouter avec succès des fonctionnalités vocales à Vue.

1. Implémenté via l'API Vue Web Speech

Dans l'implémentation de Vue, nous pouvons utiliser l'API Web Speech pour ajouter de la voix. Généralement, l'API Web Speech fait partie de la norme HTML5, et nous allons essayer ici de l'implémenter en utilisant la version plug-in de fenêtre de l'API Web Speech.

Tout d'abord, nous devons télécharger et installer les plug-ins requis (comme indiqué ci-dessous).

// 文本到语音
npm install --save responsivevoice

// 语音到文本
npm install --save annyang

Ensuite, nous pouvons ajouter de la voix dans le composant Vue spécifique. Ce qui suit est un extrait de code permettant d'utiliser le plug-in responsvoice pour implémenter la synthèse vocale dans Vue :

const ResponsiveVoice = require('responsivevoice');

ResponsiveVoice.speak('Hello World');

2. Enregistrez l'audio via Vue et téléchargez-le

En plus d'utiliser l'API Web Speech, nous pouvons également ajouter une autre façon de parler dans Vue La méthode consiste à enregistrer l'audio et à le télécharger. Tout d'abord, nous devons introduire un plug-in pour l'enregistrement audio, comme indiqué ci-dessous :

// 引入音频录制组件
npm install vue-recorder --save

Ensuite, nous pouvons utiliser le composant vue-recorder dans un composant Vue spécifique pour enregistrer et télécharger de l'audio. Voici l'extrait de code correspondant :

<vue-recorder @complete=&#39;uploadAudio&#39;></vue-recorder>

Dans cet extrait de code, "@complete" est la fonction de rappel fournie par le composant vue-recorder Nous pouvons implémenter l'opération de téléchargement audio dans cette fonction. Si vous souhaitez également implémenter des effets vocaux dans Vue, vous pouvez essayer cette méthode.

Résumé :

Le framework Vue n'est pas seulement un framework front-end puissant, mais aussi ses riches ressources et sa communauté active, ce qui fait que de nombreux développeurs adorent l'utiliser pour développer des applications Web. L'utilisation de sous-titres et de fonctions vocales dans Vue est également une fonction à très haute valeur applicative. Si vous devez également implémenter des sous-titres ou des effets vocaux dans Vue pendant le développement, vous pouvez également essayer les solutions ci-dessus. Je pense que ces méthodes répondront certainement à vos besoins de développement et offriront une meilleure expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!