iOS 微信使用Taro.Audio 无法播放声音

[hufans]

描述：iOS 设备真机预览，点击播放按钮没有声音,Mac 上调试能正常发声
code

import {  Audio } from "@tarojs/components";

const innerAudioContext = wx.createInnerAudioContext();
innerAudioContext.obeyMuteSwitch = false;
...
<Audio
                        src={pageDetail.audioURL}
                        controls={true}
                        loop={false}
                        id={pageDetail.thingID}
                        poster={pageDetail.thumbURL}
                        name={pageDetail.title}
                        author={pageDetail.author}
                    />
...

1. click Preview
2. Click Automatic Preview
3. Compile and Preview

just open the mini program

4. click play component

期望行为
iOS 设备能正常发声

报错信息

• iOS 12.3.1
• Taro 1.3.5
• Node.js 版本 10.16.0
• 报错平台 iOS

我尝试了上一个 issue #1838 的解决办法 https://segmentfault.com/a/1190000015584831 但是似乎并没有用，希望有一个解决方案，谢谢

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[hufans]

请您具体答复是哪方面不足、是截图欠缺、亦或是描述不准确？ 发自我的iPhone

…

------------------ 原始邮件 ------------------ 发件人: taro-bot[bot] <notifications@github.com> 发送时间: 2019年7月9日 23:21 收件人: NervJS/taro <taro@noreply.github.com> 抄送: JsonWrl <434880565@qq.com>, Author <author@noreply.github.com> 主题: 回复：[NervJS/taro] iOS 微信使用Taro.Audio 无法播放声音 (#3742) 欢迎提交 Issue~ 如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏 如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。 Good luck and happy coding~ — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[Garfield550]

你好，经过我的测试，Audio 组件可以在 iOS 的真机调试下发出声音。

你所使用的 wx.createInnerAudioContext() 不可用于 Audio 组件上，它是纯 API 调用，不需要 Audio 组件。

你可以 Clone 我的代码，本地编译后填入自己的 AppID 真机调试下。https://github.com/Garfield550/test-taro-audio

import Taro from '@tarojs/taro';
import { View, Text, Audio, Button } from '@tarojs/components';
import './index.scss';

export default class Index extends Taro.Component {
  public config: Taro.PageConfig = {
    navigationBarTitleText: '首页'
  };

  private audioCtx: Taro.AudioContext;

  public componentDidMount(): void {
    this.audioCtx = Taro.createAudioContext('taro-audio');
  }

  private playAudio(): void {
    this.audioCtx.play();
  }

  private pauseAudio(): void {
    this.audioCtx.pause();
  }

  private seekAudio(): void {
    this.audioCtx.seek(14);
  }

  private backToStart(): void {
    this.audioCtx.seek(0);
  }

  render() {
    return (
      <View className='index'>
        <Text style={{ display: 'block' }}>Hello world!</Text>
        <Audio
          id='taro-audio'
          name='此时此刻'
          author='许巍'
          poster='http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000'
          src='http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46'
          controls
          loop
        />
        <Button onClick={this.playAudio.bind(this)}>播放</Button>
        <Button onClick={this.pauseAudio.bind(this)}>暂停</Button>
        <Button onClick={this.seekAudio.bind(this)}>
          设置当前播放时间为 14 秒
        </Button>
        <Button onClick={this.backToStart.bind(this)}>回到开头</Button>
      </View>
    );
  }
}

[hufans]

你好，经过我的测试，Audio 组件可以在 iOS 的真机调试下发出声音。

你所使用的 wx.createInnerAudioContext() 不可用于 Audio 组件上，它是纯 API 调用，不需要 Audio 组件。

你可以 Clone 我的代码，本地编译后填入自己的 AppID 真机调试下。https://github.com/Garfield550/test-taro-audio

import Taro from '@tarojs/taro';
import { View, Text, Audio, Button } from '@tarojs/components';
import './index.scss';

export default class Index extends Taro.Component {
  public config: Taro.PageConfig = {
    navigationBarTitleText: '首页'
  };

  private audioCtx: Taro.AudioContext;

  public componentDidMount(): void {
    this.audioCtx = Taro.createAudioContext('taro-audio');
  }

  private playAudio(): void {
    this.audioCtx.play();
  }

  private pauseAudio(): void {
    this.audioCtx.pause();
  }

  private seekAudio(): void {
    this.audioCtx.seek(14);
  }

  private backToStart(): void {
    this.audioCtx.seek(0);
  }

  render() {
    return (
      <View className='index'>
        <Text style={{ display: 'block' }}>Hello world!</Text>
        <Audio
          id='taro-audio'
          name='此时此刻'
          author='许巍'
          poster='http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000'
          src='http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46'
          controls
          loop
        />
        <Button onClick={this.playAudio.bind(this)}>播放</Button>
        <Button onClick={this.pauseAudio.bind(this)}>暂停</Button>
        <Button onClick={this.seekAudio.bind(this)}>
          设置当前播放时间为 14 秒
        </Button>
        <Button onClick={this.backToStart.bind(this)}>回到开头</Button>
      </View>
    );
  }
}

我查看了您的代码，但是目前看来，似乎只是一个API的调用，如果纯调用API，那就失去了Audio组件的意义，因为没有按钮播放控制还需要单独写。我认为这是一个issue

[Garfield550]

你有仔细阅读过微信小程序的开发文档吗？ wx.createInnerAudioContext 确实是不能用到 Audio 组件上的，如果你希望可以的话，请到微信开发者论坛提这个需求。

Ref: https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/wx.createInnerAudioContext.html
Ref: https://juejin.im/post/5a731e5cf265da4e832635fb
Ref: https://blog.csdn.net/HUSHILIN001/article/details/79740459
Ref: https://juejin.im/post/5af53a6d51882542706404a9#heading-8

[hufans]

如果只能在调试器上工作、那设计之初就不应该让它在小程序调试器正常发声。 发自我的iPhone

…

------------------ 原始邮件 ------------------ 发件人: Garfield Lee <notifications@github.com> 发送时间: 2019年7月10日 10:31 收件人: NervJS/taro <taro@noreply.github.com> 抄送: JsonWrl <434880565@qq.com>, Author <author@noreply.github.com> 主题: 回复：[NervJS/taro] iOS 微信使用Taro.Audio 无法播放声音 (#3742) 你有仔细阅读过微信小程序的开发文档吗？ wx.createInnerAudioContext 确实是不能用到 Audio 组件上的，如果你希望可以的话，请到微信开发者论坛提这个需求。 Ref: https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/wx.createInnerAudioContext.html Ref: https://juejin.im/post/5a731e5cf265da4e832635fb Ref: https://blog.csdn.net/HUSHILIN001/article/details/79740459 Ref: https://juejin.im/post/5af53a6d51882542706404a9#heading-8 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[Garfield550]

你好，真机可以的，Audio 组件使用的是 wx.createAudioContext() 而不是 wx.createInnerAudioContext()。

wx.createInnerAudioContext() 需要开发者自己写播放器界面。

微信小程序的文档里已经声明了开发者工具的表现不代表最终表现

Ref: https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/env.html

[taro-bot]

Hello~

您的问题楼上已经提供了解决方案，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[hufans]

你好，真机可以的，Audio 组件使用的是 wx.createAudioContext() 而不是 wx.createInnerAudioContext()。

wx.createInnerAudioContext() 需要开发者自己写播放器界面。

微信小程序的文档里已经声明了开发者工具的表现不代表最终表现

Ref: https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/env.html

您好，忘了回复您。我注意到 我将id 自定义了，所以出现了上述问题，抱歉。

[hufans]

你好，真机可以的，Audio 组件使用的是 wx.createAudioContext() 而不是 wx.createInnerAudioContext()。

wx.createInnerAudioContext() 需要开发者自己写播放器界面。

微信小程序的文档里已经声明了开发者工具的表现不代表最终表现

Ref: https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/env.html

实际上问题还是存在，默认组件的播放按钮在iPhone 上点击没有相应

[georgezouq]

遇到相同的问题 有解决方案吗？