在react中，怎么让audio组件，只展示喇叭样式？

可以通过CSS样式来实现，具体步骤如下：

1. 在React组件中使用`<audio>`标签，并为其添加`controls`属性以显示默认的播放器控件。

2. 使用CSS选择器来定位到控件中的各个部分，例如，使用`.audio-controls .play-button`选择器来选择播放按钮。

3. 使用CSS样式来隐藏不需要的部分并修改需要的部分，例如，使用`display: none`来隐藏进度条，使用`background-image`来修改播放按钮的样式。

下面是一个示例代码：

import React from 'react';
import './AudioPlayer.css';

function AudioPlayer(props) {
  return (
    <div className="audio-wrapper">
      <audio controls src={props.src}></audio>
    </div>
  );
}

export default AudioPlayer;

.audio-wrapper {
  position: relative;
}

.audio-wrapper audio {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: -1;
}

.audio-controls {
  display: flex;
  align-items: center;
}

.audio-controls .progress {
  display: none;
}

.audio-controls .play-button {
  background-image: url('/images/speaker.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  border: none;
  outline: none;
  cursor: pointer;
}

在这个例子中，我们将播放器控件的样式通过CSS选择器 `.audio-controls .play-button` 修改为只显示喇叭样式。其他部分通过 `display: none` 隐藏掉。同时，我们将整个播放器放在一个相对定位的父容器中，通过绝对定位并设置 `opacity: 0; z-index: -1;` 的方式将 `<audio>` 标签隐藏掉，这样就可以让喇叭样式和 `<audio>` 标签重叠在一起了。