React Beautiful DND 与 Web Speech API 集成：语音控制的拖拽功能实现

苗圣禹Peter

598人浏览 · 2025-10-07 06:05:20

苗圣禹Peter · 2025-10-07 06:05:20 发布

React Beautiful DND 与 Web Speech API 集成：语音控制的拖拽功能实现

【免费下载链接】react-beautiful-dnd atlassian/react-beautiful-dnd: React Beautiful DND 是一个由Atlassian团队开发的高质量React拖放库，提供流畅的交互体验和丰富的自定义选项，广泛应用于创建可拖拽排序的列表和其他拖放功能。项目地址: https://gitcode.com/gh_mirrors/re/react-beautiful-dnd

项目概述

React Beautiful DND 是由 Atlassian 团队开发的高质量 React 拖放库，提供流畅的交互体验和丰富的自定义选项，广泛应用于创建可拖拽排序的列表和其他拖放功能。本文将介绍如何将 React Beautiful DND 与 Web Speech API 集成，实现语音控制的拖拽功能，为用户提供更多元化的交互方式。

官方文档：docs/ 核心代码：src/

技术背景

Web Speech API 是一项强大的 Web API，它允许网页具有语音识别和语音合成功能。通过将其与 React Beautiful DND 集成，我们可以实现语音控制的拖拽排序功能，提升应用的可访问性和用户体验。

实现思路

使用 Web Speech API 的语音识别功能，将用户的语音指令转换为文本。
解析文本指令，识别拖拽操作相关的命令，如"移动项目1到位置3"。
将解析后的指令转换为 React Beautiful DND 的拖拽操作，通过编程方式控制拖拽行为。
使用 React Beautiful DND 的 announce 功能，通过语音合成反馈操作结果。

代码实现

语音识别模块

首先，我们需要创建一个语音识别模块，用于监听和解析用户的语音指令。

class VoiceRecognition {
  constructor() {
    this.recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
    this.recognition.continuous = false;
    this.recognition.interimResults = false;
    this.recognition.lang = 'zh-CN';
    this.isListening = false;
    this.onResult = null;
  }

  startListening(onResult) {
    this.onResult = onResult;
    this.recognition.onresult = (event) => this.handleResult(event);
    this.recognition.start();
    this.isListening = true;
  }

  stopListening() {
    this.recognition.stop();
    this.isListening = false;
  }

  handleResult(event) {
    const transcript = event.results[0][0].transcript;
    if (this.onResult) {
      this.onResult(transcript);
    }
  }
}

指令解析模块

接下来，我们需要解析语音指令，提取出拖拽操作的相关信息。

class CommandParser {
  parse(command) {
    // 简单的指令解析逻辑，实际应用中可能需要更复杂的自然语言处理
    const moveRegex = /移动(项目|任务|项)\s*(\d+)\s*(到|至)\s*(位置|第)\s*(\d+)/i;
    const match = command.match(moveRegex);
    
    if (match) {
      return {
        action: 'move',
        sourceIndex: parseInt(match[2]) - 1, // 转换为 0 基索引
        targetIndex: parseInt(match[5]) - 1
      };
    }
    
    return null;
  }
}

与 React Beautiful DND 集成

现在，我们将语音识别和指令解析与 React Beautiful DND 集成，实现语音控制的拖拽功能。

import React, { useState, useRef } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import VoiceRecognition from './VoiceRecognition';
import CommandParser from './CommandParser';
import useAnnouncer from '../src/view/use-announcer/use-announcer';

const VoiceControlledList = () => {
  const [items, setItems] = useState([
    { id: '1', content: '任务 1' },
    { id: '2', content: '任务 2' },
    { id: '3', content: '任务 3' },
    { id: '4', content: '任务 4' },
    { id: '5', content: '任务 5' }
  ]);
  const [isListening, setIsListening] = useState(false);
  const voiceRecognition = useRef(new VoiceRecognition());
  const commandParser = useRef(new CommandParser());
  const announce = useAnnouncer('voice-controlled-list');

  const handleVoiceCommand = (command) => {
    const parsedCommand = commandParser.current.parse(command);
    if (parsedCommand && parsedCommand.action === 'move') {
      const { sourceIndex, targetIndex } = parsedCommand;
      if (sourceIndex >= 0 && sourceIndex < items.length && 
          targetIndex >= 0 && targetIndex < items.length) {
        // 执行移动操作
        const newItems = [...items];
        const [removed] = newItems.splice(sourceIndex, 1);
        newItems.splice(targetIndex, 0, removed);
        setItems(newItems);
        announce(`已将项目 ${sourceIndex + 1} 移动到位置 ${targetIndex + 1}`);
      } else {
        announce('无效的位置');
      }
    } else {
      announce('无法识别的指令');
    }
    setIsListening(false);
  };

  const toggleListening = () => {
    if (isListening) {
      voiceRecognition.current.stopListening();
      setIsListening(false);
    } else {
      voiceRecognition.current.startListening(handleVoiceCommand);
      setIsListening(true);
      announce('正在聆听指令');
    }
  };

  const onDragEnd = (result) => {
    if (!result.destination) return;
    
    const newItems = [...items];
    const [removed] = newItems.splice(result.source.index, 1);
    newItems.splice(result.destination.index, 0, removed);
    setItems(newItems);
  };

  return (
    <div>
      <button onClick={toggleListening}>
        {isListening ? '停止聆听' : '开始聆听'}
      </button>
      <DragDropContext onDragEnd={onDragEnd}>
        <Droppable droppableId="list">
          {(provided) => (
            <ul
              ref={provided.innerRef}
              {...provided.droppableProps}
            >
              {items.map((item, index) => (
                <Draggable key={item.id} draggableId={item.id} index={index}>
                  {(provided) => (
                    <li
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                    >
                      {item.content}
                    </li>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </ul>
          )}
        </Droppable>
      </DragDropContext>
    </div>
  );
};

export default VoiceControlledList;

语音反馈实现

React Beautiful DND 提供了 announce 功能，可以用于向屏幕阅读器用户提供反馈。我们可以利用这一功能，结合 Web Speech API 的语音合成功能，提供语音反馈。

import useAnnouncer from '../src/view/use-announcer/use-announcer';

// 在组件中使用
const announce = useAnnouncer('voice-controlled-list');

// 使用语音合成 API 提供语音反馈
const speak = (message) => {
  const utterance = new SpeechSynthesisUtterance(message);
  window.speechSynthesis.speak(utterance);
};

// 结合 announce 和 speak
const voiceFeedback = (message) => {
  announce(message);
  speak(message);
};

示例应用

下面是一个完整的示例应用，展示了如何使用上述模块实现语音控制的拖拽列表。

import React from 'react';
import ReactDOM from 'react-dom';
import VoiceControlledList from './VoiceControlledList';

const App = () => {
  return (
    <div className="App">
      <h1>语音控制的拖拽列表</h1>
      <p>使用语音指令来控制列表项的排序，例如："移动项目1到位置3"</p>
      <VoiceControlledList />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));