react-native-track-player没有播放Express服务器请求的歌曲

问题描述

我制作了一个具有“歌曲”路由的expressjs服务器，该服务器提供.mp3文件。 歌曲路线代码：

import express from "express"
const path = require("path")

const router = express.Router()

...

router.get("/download/:filename",(req,res,next) => {
  // 'test.mp3' is located in the same folder as this file
  const file = path.join(__dirname,`${req.params.filename}`)
  res.download(file)
})

module.exports = router

我遵循了“ react-native-track-player”中的“ Getting Started”会话，并复制了测试代码，但从服务器请求了“ test.mp3”。 MusicPlayer代码：

export default function PlayerComponent() {
  const playbackState = usePlaybackState();

  useEffect(() => {
    setup();
  },[]);

  async function setup() {
    await TrackPlayer.setupPlayer({});
    await TrackPlayer.updateOptions({
      stopWithApp: false,capabilities: [
        TrackPlayer.CAPABILITY_PLAY,TrackPlayer.CAPABILITY_PAUSE,TrackPlayer.CAPABILITY_SKIP_TO_NEXT,TrackPlayer.CAPABILITY_SKIP_TO_PREVIoUS,TrackPlayer.CAPABILITY_STOP,],compactCapabilities: [
        TrackPlayer.CAPABILITY_PLAY,});
  }

  async function togglePlayback() {
    const currentTrack = await TrackPlayer.getCurrentTrack();

    // Creating a test track
    const track = {
      id: '111',url: 'http://X.X.X.X:5000/api/songs/download/test.mp3',// My Express server URL
      title: 'Test',artist: 'myself',genre: 'Pop Music',date: '2014-05-20T07:00:00+00:00',artwork:
        'https://images.genius.com/23eaf0161396f67cc3bf264ca148a2b7.668x668x1.jpg',};
    if (currentTrack === null) {
      await TrackPlayer.add(track);
      await TrackPlayer.play();
    } else {
      if (playbackState === TrackPlayer.STATE_PAUSED) {
        await TrackPlayer.play();
      } else {
        await TrackPlayer.pause();
      }
    }
  }

  return (
    <View style={{flex: 1}}>
      <LinearGradient
        colors={['#120D14','#C00EFF']}
        start={{x: 0.5,y: 0.7}}
        end={{x: 0.5,y: 0}}
        style={{flex: 1,justifyContent: 'center'}}>
        <View style={styles.container}>
          <View style={styles.topArea}>
            <MaterialIcons name="keyboard-arrow-down" size={35} color="white" />
          </View>
          <Player
            onNext={skipToNext}
            onPrevIoUs={skipToPrevIoUs}
            onTogglePlayback={togglePlayback}
          />
        </View>
      </LinearGradient>
    </View>
  );
}

但是在单击播放按钮（位于播放器组件内部）后，音乐无法播放。但是，当我使用文档提供的跟踪时，它可以正常工作。 （代码贝娄）：

const track = {
      id: '1111',url:
        'https://drive.google.com/uc?export=download&id=1AjPwylDJgR8DOnmJWeRgZzjsohi-7ekj',title: 'Longing',artist: 'David Chavez',artwork: 'https://i.picsum.photos/id/100/200/200.jpg'
    };

这让我想到问题出在我的expressjs服务器上。 因此我开始进行一些测试，没有发现任何意外。我唯一意识到的是，当请求使用PostMan下载文件时，以.mpga扩展名下载了两个文件，而使用浏览器时，所需文件（test.mp3）为.mp3格式（即预期会发生）。我不确定这是否意味着什么，但这就是我所想的。

我所做的事情

• 我已经检查并确认请求是否由客户提出。
• 我尝试使用'sendFile（）'代替'download（）'，但没有成功。

感谢您的帮助，我希望我能说清楚。 预先感谢

解决方法

您可以使用res.sendFile方法。

,

我认为您应该使用这样的东西：

app.get(
  "/music/:fileName",async (req: Request,res: Response) => {
    try {
      const { fileName } = req.params;
      const filePath = `music/${fileName}`;
      const stream = fs.createReadStream(filePath);
      const stat = fs.statSync(filePath);

      res.set("content-type","audio/mpeg");
      res.set("Content-Range",`bytes ${0}-${stat.size - 1}/${stat.size}`);
      res.set("accept-ranges","bytes");
      res.set("Content-Length",`${stat.size}`);

      stream.pipe(res);
    } catch (err) {
      console.error(err);
    }
  },);