How do I make the play/pause button work properly in Safari?-PHP Chinese Network Q&A

<"> How do I make the play/pause button work properly in Safari?-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

How do I make the play/pause button work properly in Safari?

P粉323224129 2023-09-06 12:21:22

670

I have a situation with a small button that works on Chrome but not on Safari. I've tried trying autoplay in different places with no success. What am I missing here? Please note that I do not have sounds posted online to share. I was initially using Base64 encoded sound files. If I could find a shorter one, I would edit this post, but SO's editor limits my posts to include this one.

     音频播放和暂停

Here is a link to a JS Fiddle if it helps. Thanks.

https://jsfiddle.net/anonymouspenguin/kevhq7x1/1/

P粉323224129

reply all (1)

P粉6593785772023-09-07 10:42:58 1 floor

I'm not sure how to debug in Safari, but in Google Chrome I click on the ellipsis (3 vertical dots icon), select Settings, then Developer Tools.

Go to console>Clear console>Click your button

I got this error. The two onmouseup and ontouchpad properties in your button label conflict with other properties. Please remove them. Once playback is working properly, find the next error and continue.

Instead of putting the attributes in the button HTML tag, you can try this:

const button = document.getElementById("playPauseButton"); button.addEventListener('mousedown', () => { document.getElementById("audioElement").play(); }); button.addEventListener('mouseup', function () { document.getElementById("audioElement").pause(); });