<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>播放語音的demo</title>
</head>
<body>
<div class="lib-audio-main">點擊播放語音</div>
<!--設置一個清除語音的標籤-->
<div class="audio-container" style="display: none !important;"></div>
</body>
</html>
<script>
var audioContainer = $('.audio-container');
/* 點擊播放 */
$(document).on('click', '.lib-audio-main',
function() {
var icon = $(this).find('.lib-click-listen');
var isPlayed = icon.hasClass('playing-audio');
// 停止其他記錄音頻播放
stopAudio();
// 如果已經播放則return 不繼續操作
if (isPlayed) return;
//獲取音頻的資源路徑
var url = icon.attr('data-audio-source');
//添加播放是的演示 移除停止的樣式
icon.addClass('playing-audio').removeClass('stop-playing');
//調用方法播放音頻
createAudioElement(url);
});
// 重新創建 audio 標籤來播放選擇的音頻
function createAudioElement(src) {
//使用audio標籤 來播放我們想要播放的音頻
var audioElement = $('<audio src="' + src + '"></audio>');
$('.audio-container').empty().append(audioElement);
audioElement[0].play();
//音頻結束停止播放
audioElement[0].addEventListener('ended',
function() {
stopAudio();
});
}
// 音頻視圖全部設爲靜態
function stopAudio() {
// 清掉 audio 標籤
var audioElement = audioContainer.children('audio');
if (audioElement.length !== 0) {
audioElement[0].pause();
audioContainer.empty();
}
var playingHistory = $('.lib-click-listen.playing-audio');
playingHistory.removeClass('playing-audio').addClass('stop-playing');
// 會話框內記錄
var playingRecord = $('.audio-content.playing-audio');
playingRecord.removeClass('playing-audio');
// 被解答語音
var explainAudioTarget = $('.explain-audio-target.playing-audio');
explainAudioTarget.removeClass('playing-audio');
}
</script>使用h5 標籤播放語音
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
用Ajax 提交表單數據 serialize() 並且校驗數據
表單提交數據 表單提交數據有集中方式,比如說下面的表單: <form class="container"> <div class="row"> <div class="col-25"><
Javascript的字面量對象以及如何拆解字面量對象
簡單的說，字面量對象提供了一直非常方便構建新對象的方式，它的格式非常簡單且容易閱讀。是大多數前端程序員在構建對象時比較推崇的一種方式。 格式： var person = { name : "ziv",