diff --git a/src/GuanKiann/HuatIm/HapSing.jsx b/src/GuanKiann/HuatIm/HapSing.jsx
new file mode 100644
index 00000000..1c9f1969
--- /dev/null
+++ b/src/GuanKiann/HuatIm/HapSing.jsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import Transmit from 'react-transmit';
+import Promise from 'bluebird';
+var superagent = require('superagent-promise')(require('superagent'), Promise);
+
+import Debug from 'debug';
+
+var debug = Debug('itaigi:HapSing');
+
+class HapSing extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      id: Math.random().toString(36),
+    };
+  }
+
+  componentWillMount() {
+    this.props.setQueryParams(this.props);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.params === this.props.params) return;
+    this.props.setQueryParams(nextProps);
+  }
+
+  componentDidMount()
+  {
+    setTimeout(this.載入.bind(this), Math.random() * 1000);
+  }
+
+  componentDidUpdate(prevProps,  prevState)
+  {
+    setTimeout(this.載入.bind(this), Math.random() * 1000);
+  }
+
+  載入() {
+    document.getElementById(this.state.id).load();
+  }
+
+  play() {
+    document.getElementById(this.state.id).play();
+  }
+
+  render() {
+    return (
+      <div className='HuatIm'>
+        <audio id ={this.state.id}>
+          <source type='audio/wav'
+            src={
+              'http://服務.意傳.台灣/語音合成?查詢腔口=閩南語&查詢語句=' + encodeURI(this.props.標漢字音標) }
+           />
+        </audio>
+        <button onClick={this.play.bind(this)}
+          className='ui compact icon button'>
+          <i className='icon play'></i>
+        </button>
+      </div>
+    );
+  }
+};
+
+export default Transmit.createContainer(HapSing, {
+  queries: {
+    標漢字音標({ 音標 }) {
+      return (
+        superagent.get('http://服務.意傳.台灣/標漢字音標?查詢腔口=閩南語&查詢語句=' + 音標)
+        .then(({ body }) => (body.翻譯正規化結果))
+        .catch((err) => debug(err))
+      );
+    },
+  },
+});
diff --git a/src/GuanKiann/HuatIm/HuatIm.jsx b/src/GuanKiann/HuatIm/HuatIm.jsx
index 8f015892..f9bb3831 100644
--- a/src/GuanKiann/HuatIm/HuatIm.jsx
+++ b/src/GuanKiann/HuatIm/HuatIm.jsx
@@ -6,6 +6,7 @@ import Transmit from 'react-transmit';
 import Promise from 'bluebird';
 var superagent = require('superagent-promise')(require('superagent'), Promise);
 import SoundsMapping from './SoundsMapping';
+import HapSing from './HapSing';
 import Debug from 'debug';
 
 var debug = Debug('itaigi:HuatIm');
@@ -17,13 +18,14 @@ export default class HuatIm extends React.Component {
   }
 
   render() {
-    if (!this.props.suData.屬性內容.音標) {
+    let { 音標 } = this.props.suData.屬性內容;
+    if (!音標) {
       return <div className='HuatIm hidden'></div>;
     }
 
-    var id = SoundsMapping.map(this.props.suData.屬性內容.音標);
+    let id = SoundsMapping.map(音標);
     if (id === undefined) {
-      return <div className='HuatIm hidden'></div>;
+      return <HapSing 音標={音標} />;
     }
 
     return (