Which approach?(哪种方法？)
You can play audio with <audio> tag or <object> or <embed> .
(您可以使用<audio>标签或<object>或<embed>播放音频。)
Lazy loading(load when you need it) the sound is the best approach if its size is small.(延迟加载（在需要时加载）声音是最佳方法，如果它的大小很小。)
You can create the audio element dynamically, when its loaded you can start it with .play() and pause it with .pause() .(您可以创建音频元素动态的，它加载时，你可以这样做.play()并暂停.pause())
Things we used(我们用的东西)
We will use canplay event to detect our file is ready to be played.
(我们将使用canplay事件来检测我们的文件是否可以播放。)
There is no .stop() function for audio elements.
(音频元素没有.stop()函数。)
We can only pause them.(我们只能暂停它们。)
And when we want to start from the beginning of the audio file we change its .currentTime .(当我们想从音频文件的开头开始时，我们改变它的.currentTime 。)
We will use this line in our example audioElement.currentTime = 0;(我们将在示例audioElement.currentTime = 0;使用此行audioElement.currentTime = 0;)
.(。)
To achieve .stop() function we first pause the file then reset its time.(要实现.stop()函数，我们首先暂停文件，然后重置其时间。)
We may want to know the length of the audio file and the current playing time.
(我们可能想知道音频文件的长度和当前的播放时间。)
We already learnt .currentTime above, to learn its length we use .duration .(我们已经学习.currentTime上面的.currentTime ，了解它们使用的长度.duration 。)
Example Guide(示例指南)
- When document is ready we created an audio element dynamically
(文档准备就绪后，我们动态创建了一个音频元素)
- We set its source with the audio we want to play.
(我们用我们想要播放的音频设置它的来源。)
- We used 'ended' event to start file again.
(我们使用'已结束'事件再次启动文件。)
When the currentTime is equal to its duration audio file will stop playing.
(当currentTime等于其持续时间时，音频文件将停止播放。)
Whenever you use play() , it will start from the beginning.(每当你使用play() ，它都会从头开始。)
- We used
timeupdate event to update current time whenever audio .currentTime changes.(当音频.currentTime改变时，我们使用timeupdate事件来更新当前时间。)
- We used
canplay event to update information when file is ready to be played.(当文件准备好播放时，我们使用canplay事件来更新信息。)
- We created buttons to play, pause, restart.
(我们创建了按钮来播放，暂停，重启。)
$(document).ready(function() { var audioElement = document.createElement('audio'); audioElement.setAttribute('src', 'http://www.soundjay.com/misc/sounds/bell-ringing-01.mp3'); audioElement.addEventListener('ended', function() { this.play(); }, false); audioElement.addEventListener("canplay",function(){ $("#length").text("Duration:" + audioElement.duration + " seconds"); $("#source").text("Source:" + audioElement.src); $("#status").text("Status: Ready to play").css("color","green"); }); audioElement.addEventListener("timeupdate",function(){ $("#currentTime").text("Current second:" + audioElement.currentTime); }); $('#play').click(function() { audioElement.play(); $("#status").text("Status: Playing"); }); $('#pause').click(function() { audioElement.pause(); $("#status").text("Status: Paused"); }); $('#restart').click(function() { audioElement.currentTime = 0; }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <h2>Sound Information</h2> <div id="length">Duration:</div> <div id="source">Source:</div> <div id="status" style="color:red;">Status: Loading</div> <hr> <h2>Control Buttons</h2> <button id="play">Play</button> <button id="pause">Pause</button> <button id="restart">Restart</button> <hr> <h2>Playing Information</h2> <div id="currentTime">0</div> </body>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
