如何使用 javascript 控制 HTML5 音频标签

Posted 2023-02-25

【中文标题】如何使用 javascript 控制 HTML5 音频标签

【英文标题】：How to control HTML5 audio tag with javascript

【发布时间】：2013-03-15 16:35:35

【问题描述】：

我正在尝试在 s JS 幻灯片放映期间播放 mp3。 我在处理音频标签时遇到问题 在幻灯片开始时播放。

我尝试了一些 JS 和 html 标准音频标签，但在幻灯片开始时难以控制音乐播放。

欢迎任何想法（ps 我的 JS 非常基础）！

以下代码（包括 eivers88 脚本）：添加音频脚本时幻灯片无法加载..

<script type="text/javascript" 
src="http://slideshow.triptracker.net/slide.js"></script>
<script type="text/javascript">
<!-- 

//3rd attempt to play audio with slideshow for ***
var audioType='.mp3';
var audioPlayer = document.createElement('audio');

audioPlayer.setAttribute('src', 'images/Music/Oceans.mp3');
$('body').append(audioPlayer);
audioPlayer.load();
audioPlayer.play();

var viewer = new PhotoViewer();
viewer.enablePhotoFading()
viewer.enableAutoPlay();
viewer.disableToolbarAnimator();
viewer.randomize();
viewer.setOnClickEvent(viewer.permalink);


 viewer.add('images/Gallery/image1.jpg');`enter code here`

 //images enetered as arguments here viewer.add('images/Gallery/image1.jpg');...

【参考方案1】：

您是否尝试过类似的简单方法：

var audioType = '.mp3';
var audioPlayer = document.createElement('audio');

if(!!audioPlayer.canPlayType('audio/ogg') === true)
    audioType = '.ogg' //For firefox and others who do not support .mp3


audioPlayer.setAttribute('src', 'path/to/song' + audioType);
$('body').append(audioPlayer);
audioPlayer.load();
audioPlayer.play(); //put this where your slide show starts

【讨论】：

干杯，我在文档头部的skideshow脚本中尝试了类似的东西，但它在页面加载时自动播放：

这是代码： var audioElement = document.createElement('audio'); audioElement.setAttribute('src', 'loading.ogg'); audioElement.play();

您必须将audioPlayer.play() 放置在幻灯片放映开始之前不会被触发的位置。如果您发布更多代码（幻灯片部分），我可以帮助放置。

只是在slideshow.triptracker.net/howto.html 简单地查看一下这个插件的API，我看不到幻灯片开始时的任何回调函数。它可能看起来像viewer.onStart = function() audioPlayer.play()，但从外观上看需要对插件进行一些修补。这个周末有时间我会好好看看的。