No significant voice modulation on Safari Version 15.6

[anhmap97]

Hi guys, I'm encountering an issue with the audio voice. In the Chrome and Firefox browsers, I've adjusted the audio-rate and setPlaybackRate parameters so that the original voice can be altered, making it difficult for listeners to discern whether the speaker is male or female. However, in Safari, these settings do not seem to work as intended, and the voice remains unaltered. Below are my settings:
Safari Version 15.6

audioPlayer = WaveSurfer.create({
    container: elVisualizer.value ?? '.ano-advance-audio-player_progress_visualizer',
    height: 49,
    waveColor: 'rgba(216, 212, 223, 0.33)',
    progressColor: '#ffffff',
    barWidth: 2,
    barRadius: 0,
    barGap: 3,
    interact: true,
    dragToSeek: true,
    cursorWidth: 0,
    normalize: true,
    audioRate: props.playRate
  })
  audioPlayer.setPlaybackRate(props.playRate, props.playPitch)
  audioPlayer.on('finish', () => (playing.value = false))
  audioPlayer.on('pause', () => (playing.value = false))
  audioPlayer.on('play', () => (playing.value = true))
  audioPlayer.on('timeupdate', () => updateTimer())
  audioPlayer.on('seeking', () => updateTimer())
  audioPlayer.on('ready', () => {
    audioPlayer?.setTime(0)
    updateTimer()
  })

log below
{
    "listeners": {
        "finish": {},
        "pause": {},
        "play": {},
        "timeupdate": {},
        "seeking": {},
        "ready": {}
    },
    "media": {},
    "plugins": [],
    "decodedData": {},
    "subscriptions": [],
    "options": {
        "waveColor": "rgba(216, 212, 223, 0.33)",
        "progressColor": "#ffffff",
        "cursorWidth": 0,
        "minPxPerSec": 0,
        "fillParent": true,
        "interact": true,
        "dragToSeek": true,
        "autoScroll": true,
        "autoCenter": true,
        "sampleRate": 8000,
        "container": {},
        "height": 49,
        "barWidth": 2,
        "barRadius": 0,
        "barGap": 3,
        "normalize": true,
        "audioRate": 1.25
    },
    "timer": {
        "listeners": {
            "tick": {}
        }
    },
    "renderer": {
        "listeners": {
            "click": {},
            "scroll": {},
            "render": {},
            "drag": {}
        },
        "timeouts": [
            {},
            {}
        ],
        "isScrolling": false,
        "audioData": {},
        "resizeObserver": {},
        "isDragging": false,
        "options": {
            "waveColor": "rgba(216, 212, 223, 0.33)",
            "progressColor": "#ffffff",
            "cursorWidth": 0,
            "minPxPerSec": 0,
            "fillParent": true,
            "interact": true,
            "dragToSeek": true,
            "autoScroll": true,
            "autoCenter": true,
            "sampleRate": 8000,
            "container": {},
            "height": 49,
            "barWidth": 2,
            "barRadius": 0,
            "barGap": 3,
            "normalize": true,
            "audioRate": 1.25
        },
        "parent": {},
        "container": {},
        "scrollContainer": {},
        "wrapper": {},
        "canvasWrapper": {},
        "progressWrapper": {},
        "cursor": {}
    }
}

[anhmap97]

I'm using "wavesurfer.js": "^7.2.2"

[katspaugh]

Safari preserves the pitch by default, you need to explicitely turn it off. Two ways to do that:

With a custom media element and a preservePitch attribute

const media = new Audio()
media.preservePitch = false
media.playbackRate = 2

const wavesurfer = WaveSurfer.create({
  container: '...',
  media,
})

Or with wavesurfer:

wavesurfer.setPlaybackRate(2, false) // speed = 2, preservePitch = false

See this example: https://wavesurfer.xyz/examples/?speed.js

[anhmap97]

Hi @katspaugh thanks for your answer
I've tried both methods you suggested, and neither of them worked. Upon my investigation, it seems that the Preserve pitch feature is only fully supported in Safari starting from version 17.2. Here's the link where you can verify it, and you can try it with versions below 17 on Safari:

Link to the Preserve pitch documentation

Regarding the link you provided, I've also tested it with Safari versions below 17, but toggling Preserve pitch on or off didn't make any difference.