[英]HTML5 Audio object doesn't play in Safari
On my page , I dynamically create an HTML5 Audio element in JavaScript:在我的页面上,我用 JavaScript 动态创建了一个 HTML5 Audio 元素:
bell = new Audio("alarmclock.mp3");
Later on (in response to a jQuery Countdown object expiring), I play it:稍后(响应 jQuery Countdown 对象过期),我播放它:
bell.play();
Results:结果:
How would I go about troubleshooting this?我将如何解决这个问题? I'd really like to have it working in MobileSafari so my web app can be portable.我真的很想让它在 MobileSafari 中工作,这样我的网络应用程序就可以移植了。
About iPhone Safari: It seems play() work when launched by an onclick event.关于 iPhone Safari:似乎 play() 在由 onclick 事件启动时起作用。 See http://groups.google.com/group/iphonewebdev/browse_thread/thread/91e31ba7ae25e6d4?hl=en请参阅http://groups.google.com/group/iphonewebdev/browse_thread/thread/91e31ba7ae25e6d4?hl=en
Good question with "How would I go about troubleshooting this?". “我将如何解决这个问题?”的好问题。 Here would be my plan of attack...这将是我的攻击计划......
$(document).ready(function () { /* ... */ })
to load the audio on page load.使用 jQuery 的$(document).ready(function () { /* ... */ })
在页面加载时加载音频。 Does it still work?它仍然有效吗?Good news everybody大家好消息
I read somewhere that once you've played the sound once within a user interaction such as touch or click, you can then play it dynamically from your code.我在某处读到,一旦您在用户交互(例如触摸或点击)中播放了一次声音,您就可以从代码中动态播放它。
So set volume to zero and play all loaded sounds in one go.因此,将音量设置为零并一次性播放所有加载的声音。
I had a listener on 'touchstart' with a single instantiated function that played all the sounds once the user touches the screen.我在“touchstart”上有一个监听器,它有一个实例化的函数,一旦用户触摸屏幕,它就会播放所有的声音。
Here's how I did it in my REACT didMount()这是我在 REACT didMount() 中的做法
componentDidMount()
{
let that = this;
document.body.addEventListener('touchstart', function(evt) //First touch event on the screen will trigger this
{
console.log("Audio Setup for iOS:", that.state.allow_sound);
if(!that.state.allow_sound) //False on initial load
{
var Audio1 = document.getElementById("ping");
Audio1.load();
Audio1.volume = 0;
Audio1.play();
var Audio2 = document.getElementById("boom");
Audio2.load();
Audio2.volume = 0;
Audio2.play();
var Audio3 = document.getElementById("splash");
Audio3.load();
Audio3.volume = 0;
Audio3.play();
var Audio4 = document.getElementById("hit");
Audio4.load();
Audio4.volume = 0;
Audio4.play();
that.setState({allow_sound : true})
}
});
}
Then you can call these sounds dynamically from within the code.
Use使用
bell = new Audio("alarmclock.mp3");
/*** The magical line ***/
bell.load()
bell.play()
Its preferable to use the new Audio() and load() on page load and play() it in some function call.最好在页面加载时使用 new Audio() 和 load() 并在某些函数调用中使用 play() 它。 Because load() takes some time.因为 load() 需要一些时间。 So better to load() the audio on page load to reduce latency.所以最好在页面加载时加载()音频以减少延迟。 Hope it works.希望它有效。 :) :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.