APP开发之提示音、audio标签

效果图：

HTML代码 

<link href="css/my_Privacy.css" rel="stylesheet" type="text/css" />
<script src="lib/mui.min.js"></script>
<script type="text/javascript" src="lib/mui.picker.js"></script>
<section class="aui-flexView">
	<header class="aui-navBar aui-navBar-fixed mui-bar mui-bar-nav mui-bar-nav-bg skin-bg-nav">
		<a style="margin-top:-8px;" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">通知铃声</h1>
	</header>
	<section class="aui-scrollView">
		<div class="aui-gray-box_2"></div>
		<a href="javascript:;" class="aui-cell-list">
			<span class="aui-cell-left" style="width: 50px;">本地铃声</span>
			<label style="height: 30px;" class="aui-cell-right">
				<i class="iconfont icon-more">&#xe603;</i>
			</label>
		</a>
		<div class="switch">
			<div class="aui-gray-box">
				<p>我的铃声</p>
			</div>
			<div class="aui-cell-list-box">
				<a href="javascript:;" class="aui-cell-list" onclick="window.kos.PromptTone(7)">
					<span class="aui-cell-left" id="youhebukeid">许嵩-有何不可-铃声版</span>
					<label style="height: 30px;" class="aui-cell-right">
						<span style="font-size: 14px;" id="">40</span>秒
					</label>
				</a>
				<a href="javascript:;" class="aui-cell-list" onclick="window.kos.PromptTone(6)">
					<span class="aui-cell-left" id="BBKid">我在那一角落患过伤风</span>
					<label style="height: 30px;" class="aui-cell-right">
						<span style="font-size: 14px;" id="">48</span>秒
					</label>
				</a>
			</div>
		</div>
		<div class="switch">
			<div class="aui-gray-box">
				<p>系统铃声</p>
			</div>
			<div class="aui-cell-list-box">
				<a href="javascript:;" class="aui-cell-list" onclick="window.kos.PromptTone(1)">
					<span class="aui-cell-left " id="momoid" style="width: 50px;">陌陌</span>
					<label style="height: 30px;" class="aui-cell-right">
						<span style="font-size: 14px;" id="">3</span>秒
					</label>
				</a>
				<a href="javascript:;" class="aui-cell-list" onclick="window.kos.PromptTone(2)">
					<span class="aui-cell-left" id="freshid" style="width: 50px;">清新</span>
					<label style="height: 30px;" class="aui-cell-right">
						<span style="font-size: 14px;" id="">5</span>秒
					</label>
				</a>
				<a href="javascript:;" class="aui-cell-list" onclick="window.kos.PromptTone(3)">
					<span class="aui-cell-left" id="MetalSpringid" style="width: 50px;">金属弹簧</span>
					<label style="height: 30px;" class="aui-cell-right">
						<span style="font-size: 14px;" id="">5</span>秒
					</label>
				</a>
				<a href="javascript:;" class="aui-cell-list" onclick="window.kos.PromptTone(4)">
					<span class="aui-cell-left" id="conciseid" style="width: 50px;">简洁</span>
					<label style="height: 30px;" class="aui-cell-right">
						<span style="font-size: 14px;" id="">4</span>秒
					</label>
				</a>
				<a href="javascript:;" class="aui-cell-list" onclick="window.kos.PromptTone(5)">
					<span class="aui-cell-left" id="WeChatid" style="width: 50px;">微信</span>
					<label style="height: 30px;" class="aui-cell-right">
						<span style="font-size: 14px;" id="">5</span>秒
					</label>
				</a>
			</div>
		</div>
	</section>
</section>

 JS代码

var audio = new Audio();
var MusicName = "";
$(function() {
	switch (localStorage.getItem("Music")) {
		case "陌陌":
			$("#momoid").addClass("Selection");
			break;
		case "清新":
			$("#freshid").addClass("Selection");
			break;
		case "金属弹簧":
			$("#MetalSpringid").addClass("Selection");
			break;
		case "简洁":
			$("#conciseid").addClass("Selection");
			break;
		case "微信":
			$("#WeChatid").addClass("Selection");
			break;
		case "许嵩-有何不可-铃声版":
			$("#youhebukeid").addClass("Selection");
			break;
		case "我在那一角落患过伤风":
			$("#BBKid").addClass("Selection");
			break;
		default:
			break;
	}
})
window.kos.PromptTone = function(ts) {
	$('span').removeClass('Selection');
	switch (ts) {
		case 1:
			audio.src = "video/momo.mp3";
			$("#momoid").addClass("Selection");
			MusicName = $("#momoid").html()
			localStorage.setItem("Music", MusicName);
			break;
		case 2:
			audio.src = "video/fresh.mp3";
			$("#freshid").addClass("Selection");
			MusicName = $("#freshid").html()
			localStorage.setItem("Music", MusicName);
			break;
		case 3:
			audio.src = "video/MetalSpring.mp3";
			$("#MetalSpringid").addClass("Selection");
			MusicName = $("#MetalSpringid").html()
			localStorage.setItem("Music", MusicName);
			break;
		case 4:
			audio.src = "video/concise.mp3";
			$("#conciseid").addClass("Selection");
			MusicName = $("#conciseid").html()
			localStorage.setItem("Music", MusicName);
			break;
		case 5:
			audio.src = "video/WeChat.mp3";
			$("#WeChatid").addClass("Selection");
			MusicName = $("#WeChatid").html()
			localStorage.setItem("Music", MusicName);
			break;
		case 6:
			audio.src = "video/BBK.mp3";
			$("#BBKid").addClass("Selection");
			MusicName = $("#BBKid").html()
			localStorage.setItem("Music", MusicName);
			break;
		case 7:
			audio.src = "video/youhebuke.mp3";
			$("#youhebukeid").addClass("Selection");
			MusicName = $("#youhebukeid").html()
			localStorage.setItem("Music", MusicName);
			break;
		default:
			break;
	}
	audio.play();
}

 注意：音乐名称不能有中文，不然播放不了，我就遇到这个bug。本人为初学者，不好勿喷，谢谢。